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

Question

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".

hugo · Accepted Answer · 2019-08-03 16:54:03Z

2

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.

edited Aug 3, 2019 at 16:54

answered Aug 2, 2019 at 0:04

hugo

3,2612 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Evan Moore Over a year ago

This is my .babel.rc file: { "presets": ["env", "react"] } Should i replace those presets or add to them?

hugo Over a year ago

Ok, you already have "react" in your presets... so nothing to add/replace here. Please try to run babel --presets @babel/preset-react ./src/app.js, if it works then your .babel.rc is correct and maybe the webpack config has something wrong about it.

Evan Moore Over a year ago

When I run that I get this error: Error: Couldn't find preset "@babel/preset-react" relative to directory "./src"

Evan Moore Over a year ago

Hi hugo - just wanted to check to see if you had any idea what to try given the above error message. I've looked at answers to similar questions and can't find anything that works :/

hugo Over a year ago

Ok, so if it says it can't find it in ./src it's because it's not there... I tried and got the same thing -- what did it is babel --presets ../node_modules/babel-preset-react src/app.js

|

Collectives™ on Stack Overflow

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

1 Answer 1

Getting babel-loader to use preset-react

In .babelrc

In webpack.config.js

Check the package's name

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Getting babel-loader to use preset-react

In .babelrc

In webpack.config.js

Check the package's name

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related