CODEWITHSUNDEEP
javascriptreactjs
Evan Moore
Evan Moore

Reputation: 343

Trying to build ReactJS app in prod - Module build failed: SyntaxError: Unexpected token

Its been a while since I've pushed my React app to a prod environment after a bunch of changes (dumb, I know) and now when I try to build it for prod the build is failing and I'm getting the following error:

ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (9:16)

   7 | 
   8 | 
>  9 | ReactDOM.render(<AppRouter />, document.getElementById('app'));
     |                 ^
  10 | 
  11 | 

 @ multi @babel/polyfill ./src/app.js
error Command failed with exit code 2.

Here's my webpack.config.js file:

const path = require('path');

module.exports = (env) => {

    const isProduction = env === 'production';

    console.log(env);
    return {
        entry: ["@babel/polyfill", "./src/app.js"],
        output: {
            path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }]
        },
        devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true
        }
    };
};

And here's my package.json file:

{
  "name": "SheSaysGo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "start": "node server/server.js"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "chaituvr-react-graphjs-test": "^0.0.3",
    "cosmicjs": "^3.2.17",
    "express": "4.15.4",
    "google-maps-react": "^2.0.2",
    "live-server": "^1.2.1",
    "lodash": "^4.17.11",
    "react": "16.0.0",
    "react-dom": "16.0.0",
    "react-leaf-carousel": "^1.2.2",
    "react-router-dom": "4.2.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  }
}

It builds when I run it locally as a dev build with "yarn run dev-server" but not when I run "yarn run build:prod".

Upvotes: 0

Views: 531

Answers (1)

hugo
hugo

Reputation: 3241

EDIT: Sorry I had written .babel.rc, it's .babelrc

Getting babel-loader to use preset-react

It looks like Babel is interpreting your file as regular JavaScript, as opposed to React JSX (or whatever it's called).

I see in your package.json that you're using @babel/preset-react, so it should work if well configured.

In .babelrc

Check your .babelrc file, it should contain something like this:

{
  "presets": ["@babel/preset-react"]
}

You can also change the extension of the file to .jsx, it find it to be clearer, but that's up to your personal preference.

In webpack.config.js

Alternatively, you can define this in the webpack config. Replace this:

loader: 'babel-loader',

with this (in your webpack.config.js):

use: {
    loader: 'babel-loader',
    options: {
        presets: ['@babel/preset-env', '@babel/preset-react']
    }
},

Check the package's name

Looking closer at your package.json, it contains:

"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",

But you're using @babel/preset-env and @babel/preset-react. So npm install --save those and remove the old ones from your package.json.

Run babel --presets @babel/preset-react ./src/app.js, to see if the preset is there and works:

Running it should print to the console:

ReactDOM.render(React.createElement(AppRouter, null), document.getElementById('app'));

^ this is babel successfully converting JSX to JS.

Upvotes: 2

Related Questions