Webpack, React JSX, Babel: Module build failed, "unexpected token" empty?

AlysCole

I'm having trouble compiling my React JSX code using Babel on Webpack. When I try to run webpack on my code, a SyntaxError comes up with "Unexpected token".

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

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

It seems to be having an error with an empty line. I'm not sure how to go about this.

I have the presets babel-preset-es2015 and babel-preset-react installed.

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" ]
}

I'd appreciate any help, whatsoever! Thanks.

Edit:

So I've separated some of the code into a module to try to sort everything out, and moved some of the code to a new file, Grid.js. This is imported to the main.jsx with import './Grid.js'; placed at the top of the file. When I try to run Webpack, now, basically the same error comes up, but it directs towards the end of the Grid.js file, now, instead of at the end of 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 | };
      |   ^

It doesn't seem to be the code. I've tried removing the node_modules folder in the project directory and reinitiating with npm init before reinstalling the dependencies. Didn't work. :/

Edit 2: Here's the code for 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;
};
Anthony Kong

You are missing a '}' at the end of the file.

Here is a properly-indented version of your 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;
  }
};

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Webpack module build failed unexpected token (rails react build)

Webpack, React, JSX, Babel - Unexpected token <

React, Babel, Webpack not parsing jsx, unexpected token error

Unexpected token with react jsx and babel

Module Build Failed - Webpack, React, Babel

Webpack - Babel - Parsing JSX: SyntaxError: Unexpected token

ReactJS - Module build failed: SyntaxError: Unexpected token react components not rendering

React Serverside rendering Unexpected token, JSX and Babel

webpack + babel - react, unexpected token 'import'

webpack tsx Module parse failed: Unexpected token

Webpack failed to parse TypeScript module: Unexpected token

Module build failed: SyntaxError: Unexpected token

Module build failed: SyntaxError: Unexpected token, expected ,

Html-Webpack-Plugin Template: Module build failed: SyntaxError: Unexpected token

Module parse failed: Unexpected token (6:16) when building react with webpack

Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."

React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

Module parse failed: Unexpected token (9:37) with babel-loader

react-router-redux: Module build failed: SyntaxError: Unexpected token ...reducers

Webpack & Babel : Server Side rendering of React Component "Unexpected token '<'"

Jest encountered an unexpected token (React, Typescript, Babel, Jest & Webpack setup)

Module parse failed: Unexpected token when using webpack 5

Webpack error after upgrading Node: "Module parse failed: Unexpected token"

Module parse failed: Unexpected token using webpack-dev-server

Module Parse Failed: Unexpected token in Webpack Typescript Loader

Django + Babel + Webpack unexpected token

Webpack/babel Unexpected token, expected ";"

Webpack and React -- Unexpected token