2017-04-19 79 views
1

我在Webpack上使用Babel编译我的React JSX代码时遇到了麻烦。当我尝试在我的代码上运行webpack时,SyntaxError出现“Unexpected token”。Webpack,React JSX,Babel:模块构建失败,“意外令牌”为空?

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

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

它似乎有一个空行错误。我不知道如何去做这件事。

我安装了预设babel-preset-es2015babel-preset-react

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' 
     }) 
     } 
    ] 
    } 
}; 

.babelrc

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

我会很感激任何帮助,任何!谢谢。

编辑:

所以我分开一些代码到一个模块中尝试一切梳理,并移动一些代码到一个新的文件,Grid.js。这被导入到main.jsximport './Grid.js';放置在文件的顶部。当我尝试运行Webpack时,现在基本上出现了相同的错误,但是它现在指向Grid.js文件的末尾,而不是main.jsx的末尾。

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; 
}; 
+1

你能否提供细节的正确缩进的版本约main.jsx –

+0

你可能有一些奇怪的不可见字符,或看起来像在普通空间中的字符您编辑。尝试删除1123行,看看是否是这种情况。 – ArneHugo

+0

@VikasSardana它长达数百行,所以我不确定在这里发布它是否正常。然而,我有一些代码从'main.jsx'拆分为另一个文件'Grid.js'来分开模块,现在基本上出现了相同的错误,但它指向另一条线。 – AliCole

回答

0

您在文件末尾缺少'}'。

这里是您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; 
    } 
}; 
+0

Welp。就是这样。谢谢你发现!我想,它一定是隐藏在我鼻子下面的一件简单的事情,但我无法弄清楚。 – AliCole

+0

不客气。强烈建议在构建过程中添加eslint。这有助于解决这类问题 –

+0

我会那样做的,绝对如此。感谢帮助! – AliCole

相关问题