Webpack、React JSX、Babel：モジュールビルドに失敗しました。 "予期しないトークン"が空ですか？

Question

WebpackのBabelを使用してReact JSXコードをコンパイルする際に問題があります。自分のコードでwebpackを実行しようとすると、SyntaxErrorに "Unexpected token"が現れます。

ERROR in ./src/main.jsx 
Module build failed: SyntaxError: Unexpected token (1123:0) 

    1121 | ReactDOM.render(<Dungeon />, 
    1122 |     document.getElementById("game")); 
> 1123 | 
     |^

空白行にエラーがあるようです。私はこれについてどうやって行くのか分からない。

私がインストールされたプリセットbabel-preset-es2015とbabel-preset-reactを持っています。

{ 
    "plugins": ["transform-react-jsx"], 
    "presets": [ "react", "es2015", "stage-0" ] 
} 

.babelrc

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: { 
    app: [ 
     './src/main.jsx' 
    ] 
    }, 
    output: { 
    publicPath: '/dist/', 
    path: path.join(__dirname, 'dist/'), 
    filename: 'main.js' 
    }, 
    devtool: 'source-map', 
    plugins: [ 
    new ExtractTextPlugin('./styles.css') 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: [/node_modules/, /styles/], 
     include: path.join(__dirname, 'src'), 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: [/node-modules/] 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader!sass-loader' 
     }) 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader' 
     }) 
     } 
    ] 
    } 
}; 

私は一切、任意の助けをいただければと思います！ありがとう。

編集：

は、だから私はすべてのものを整理しようとするモジュールにコードの一部を分離し、新しいファイル、Grid.jsにコードの一部を移動しました。これはmain.jsxにインポートされ、import './Grid.js';がファイルの先頭に配置されます。 Webpackを実行しようとすると、基本的に同じエラーが表示されますが、main.jsxの末尾ではなく、Grid.jsファイルの最後に向かっています。

ERROR in ./src/Grid.js 
Module build failed: SyntaxError: Unexpected token (208:2) 

    206 | // Loop back from the target square and return the path 
    207 | return closed; 
> 208 | }; 
     | ^

コードではないようです。私はプロジェクトディレクトリ内のnode_modulesフォルダを削除し、依存関係を再インストールする前にnpm initで再起動しようとしました。うまくいきませんでした。 ：/

編集2：Grid.jsのコードは次のとおりです。

// Declare a Grid namespace 
var Grid = {}; 

Grid.getAdjacentCells = (x, y, grid, noDiagonal) => { 
    // returns an array of adjacent cells. 
    var adjacents = []; 

    if (grid[y - 1] && grid[y - 1][x] != null) { // northern cell 
    adjacents.push({ 
     x: x, 
     y: y - 1, 
     cell: grid[y - 1][x], 
     direction: "n" 
    }); 
    } 

    if (grid[y] && grid[y][x + 1] != null) { // eastern cell 
    adjacents.push({ 
     x: x + 1, 
     y: y, 
     cell: grid[y][x + 1], 
     direction: "e" 
    }); 
    } 

    if (grid[y + 1] && grid[y + 1][x] != null) { // southern cell 
    adjacents.push({ 
     x: x, 
     y: y + 1, 
     cell: grid[y + 1][x], 
     direction: "s" 
    }); 
    } 

    if (grid[y] && grid[y][x - 1] != null) { // western cell 
    adjacents.push({ 
     x: x - 1, 
     y: y, 
     cell: grid[y][x - 1], 
     direction: "w" 
    }); 
    } 

    // if noDiagonal is false, grab diagonal cells 
    if (!noDiagonal) { 
    if (grid[y - 1] && grid[y - 1][x - 1] != null) { // north-west cell 
     adjacents.push({ 
     x: x - 1, 
     y: y - 1, 
     cell: grid[y - 1][x - 1], 
     direction: "nw" 
     }); 
    } 

    if (grid[y - 1] && grid[y - 1][x + 1] != null) { // north-east 
     adjacents.push({ 
     x: x + 1, 
     y: y - 1, 
     cell: grid[y - 1][x + 1], 
     direction: "ne" 
     }); 
    } 

    if (grid[y + 1] && grid[y + 1][x + 1] != null) { // south-east 
     adjacents.push({ 
     x: x + 1, 
     y: y + 1, 
     cell: grid[y + 1][x + 1], 
     direction: "se" 
     }); 
    } 

    if (grid[y + 1] && grid[y + 1][x - 1] != null) { 
     adjacents.push({ 
     x: x - 1, 
     y: y + 1, 
     cell: grid[y + 1][x - 1], 
     direction: "sw" 
     }); 
    } 
    } 

    return adjacents; 
}; 

Grid.getRandomPointWithin = (x1, x2, y1, y2) => { 
    return { 
    x: Math.randomBetween(x1, x2), 
    y: Math.randomBetween(y1, y2) 
    }; 
}; 

Grid.getRandomMatchingCellWithin = (x1, x2, y1, y2, type, grid) => { 
    let cell = { 
    x: Math.randomBetween(x1, x2), 
    y: Math.randomBetween(y1, y2) 
    }; 

    while (grid[cell.y][cell.x].type != type) { 
    cell = { 
     x: Math.randomBetween(x1, x2), 
     y: Math.randomBetween(y1, y2) 
    }; 
    } 

    return cell; 
}; 

Grid.randomDirection =() => { 
    return (Math.randomBetween(0,1) ? "x" : "y"); 
}; 

Grid.calculateApproxDistance = (x1, y1, x2, y2) => { 
    return Math.abs((x2 - x1) + (y2 - y1)); 
}; 

Grid.determinePath = (startX, startY, targetX, targetY, grid) => { 
    let closed = [], 
     open = []; 

    if (startX == targetX && startY == targetY) 
    return []; 

    let getCellFromList = (x, y, list) => { 
    for (let cell of list) { 
     console.log("Checking cell: ", cell, "of list against x:", x, "and y:", y); 
     if (cell.x == x && cell.y == y) { 
     return cell; 
     } 
    } 
    return false; 
    }; 

    let addCellToList = (cell, list) => { 
    for (let i in list) { 
     // check whether cell already exists in the list 
     if (list[i].x == cell.x && list[i].y == cell.y) { 
     // if so, check whether the cell in list has a higher score. 
     if (list[i].f > cell.f) { 
      // update cell to the lower score if so. 
      list[i].g = cell.g; 
      list[i].h = cell.h; 
      list[i].f = cell.f; 
      list[i].parent = cell.parent; 
      return list; 
     } 
     // and if it the newer cell has a higher score, return the list as it is. 
     return list; 
     } 
    } 

    // The cell doesn't exist in the list. Push it in. 
    list.push(cell); 
    return list; 
    }; 

    let start = { 
    x: startX, 
    y: startY, 
    g: 0, 
    h: Grid.calculateApproxDistance(startX, startY, targetX, targetY) * 10 
    }; 

    start.f = start.g + start.h; 

    open.push(start); 

    let searching = true; 
    while (searching) { 
    // Set the current cell to one with the lowest score in the open list. 
    let curr = open.reduce(function lowestScoreInOpenList(prev, curr) { 
     if (!prev) 
     return curr; 
     if (curr.f < prev.f) 
     return curr; 
     return prev; 
    }, null); 

    // Transfer it to the closed list 
    open.splice(open.indexOf(curr), 1); 
    closed = addCellToList(curr, closed); 

    // Check adjacent cells 
    let adjacentCells = Grid.getAdjacentCells(curr.x, curr.y, grid); 

    // Filter through adjacent cells 
    adjacentCells = adjacentCells.filter(function adjacentCellFilter(a) { 
     // Check whether cell is in the closed list 
     if (getCellFromList(a.x, a.y, closed)) { 
     // If so, skip it. 
     return false; 
     } 
     // If cell is not a room cell, skip it. 
     else if (a.cell.type != "corridor" || 
       a.cell.type != "room") 
     return false; 
     return true; 
    }); 
    console.log(adjacentCells); 

    // Transform each returned adjacent object into a path object 


    searching = false; 

    // Loop back from the target square and return the path 
    return closed; 
}; 

Answer 1

ファイルの最後に「}」がありません。ここで

があなたのGrid.js

// Declare a Grid namespace 
var Grid = {}; 

Grid.getAdjacentCells = (x, y, grid, noDiagonal) => { 
    // returns an array of adjacent cells. 
    var adjacents = []; 

    if (grid[y - 1] && grid[y - 1][x] != null) { 
    // northern cell 
    adjacents.push({ 
     x: x, 
     y: y - 1, 
     cell: grid[y - 1][x], 
     direction: 'n', 
    }); 
    } 

    if (grid[y] && grid[y][x + 1] != null) { 
    // eastern cell 
    adjacents.push({ 
     x: x + 1, 
     y: y, 
     cell: grid[y][x + 1], 
     direction: 'e', 
    }); 
    } 

    if (grid[y + 1] && grid[y + 1][x] != null) { 
    // southern cell 
    adjacents.push({ 
     x: x, 
     y: y + 1, 
     cell: grid[y + 1][x], 
     direction: 's', 
    }); 
    } 

    if (grid[y] && grid[y][x - 1] != null) { 
    // western cell 
    adjacents.push({ 
     x: x - 1, 
     y: y, 
     cell: grid[y][x - 1], 
     direction: 'w', 
    }); 
    } 

    // if noDiagonal is false, grab diagonal cells 
    if (!noDiagonal) { 
    if (grid[y - 1] && grid[y - 1][x - 1] != null) { 
     // north-west cell 
     adjacents.push({ 
     x: x - 1, 
     y: y - 1, 
     cell: grid[y - 1][x - 1], 
     direction: 'nw', 
     }); 
    } 

    if (grid[y - 1] && grid[y - 1][x + 1] != null) { 
     // north-east 
     adjacents.push({ 
     x: x + 1, 
     y: y - 1, 
     cell: grid[y - 1][x + 1], 
     direction: 'ne', 
     }); 
    } 

    if (grid[y + 1] && grid[y + 1][x + 1] != null) { 
     // south-east 
     adjacents.push({ 
     x: x + 1, 
     y: y + 1, 
     cell: grid[y + 1][x + 1], 
     direction: 'se', 
     }); 
    } 

    if (grid[y + 1] && grid[y + 1][x - 1] != null) { 
     adjacents.push({ 
     x: x - 1, 
     y: y + 1, 
     cell: grid[y + 1][x - 1], 
     direction: 'sw', 
     }); 
    } 
    } 

    return adjacents; 
}; 

Grid.getRandomPointWithin = (x1, x2, y1, y2) => { 
    return { 
    x: Math.randomBetween(x1, x2), 
    y: Math.randomBetween(y1, y2), 
    }; 
}; 

Grid.getRandomMatchingCellWithin = (x1, x2, y1, y2, type, grid) => { 
    let cell = { 
    x: Math.randomBetween(x1, x2), 
    y: Math.randomBetween(y1, y2), 
    }; 

    while (grid[cell.y][cell.x].type != type) { 
    cell = { 
     x: Math.randomBetween(x1, x2), 
     y: Math.randomBetween(y1, y2), 
    }; 
    } 

    return cell; 
}; 

Grid.randomDirection =() => { 
    return Math.randomBetween(0, 1) ? 'x' : 'y'; 
}; 

Grid.calculateApproxDistance = (x1, y1, x2, y2) => { 
    return Math.abs(x2 - x1 + (y2 - y1)); 
}; 

Grid.determinePath = (startX, startY, targetX, targetY, grid) => { 
    let closed = [], open = []; 

    if (startX == targetX && startY == targetY) return []; 

    let getCellFromList = (x, y, list) => { 
    for (let cell of list) { 
     console.log(
     'Checking cell: ', 
     cell, 
     'of list against x:', 
     x, 
     'and y:', 
     y 
    ); 
     if (cell.x == x && cell.y == y) { 
     return cell; 
     } 
    } 
    return false; 
    }; 

    let addCellToList = (cell, list) => { 
    for (let i in list) { 
     // check whether cell already exists in the list 
     if (list[i].x == cell.x && list[i].y == cell.y) { 
     // if so, check whether the cell in list has a higher score. 
     if (list[i].f > cell.f) { 
      // update cell to the lower score if so. 
      list[i].g = cell.g; 
      list[i].h = cell.h; 
      list[i].f = cell.f; 
      list[i].parent = cell.parent; 
      return list; 
     } 
     // and if it the newer cell has a higher score, return the list as it is. 
     return list; 
     } 
    } 

    // The cell doesn't exist in the list. Push it in. 
    list.push(cell); 
    return list; 
    }; 

    let start = { 
    x: startX, 
    y: startY, 
    g: 0, 
    h: Grid.calculateApproxDistance(startX, startY, targetX, targetY) * 10, 
    }; 

    start.f = start.g + start.h; 

    open.push(start); 

    let searching = true; 

    while (searching) { 
    // Set the current cell to one with the lowest score in the open list. 
    let curr = open.reduce(
     function lowestScoreInOpenList(prev, curr) { 
     if (!prev) return curr; 
     if (curr.f < prev.f) return curr; 
     return prev; 
     }, 
     null 
    ); 

    // Transfer it to the closed list 
    open.splice(open.indexOf(curr), 1); 
    closed = addCellToList(curr, closed); 

    // Check adjacent cells 
    let adjacentCells = Grid.getAdjacentCells(curr.x, curr.y, grid); 

    // Filter through adjacent cells 
    adjacentCells = adjacentCells.filter(function adjacentCellFilter(a) { 
     // Check whether cell is in the closed list 
     if (getCellFromList(a.x, a.y, closed)) { 
     // If so, skip it. 
     return false; 
     } else if (a.cell.type != 'corridor' || a.cell.type != 'room') 
     // If cell is not a room cell, skip it. 
     return false; 
     return true; 
    }); 
    console.log(adjacentCells); 

    // Transform each returned adjacent object into a path object 

    searching = false; 

    // Loop back from the target square and return the path 
    return closed; 
    } 
};