ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

Question

Why am I getting this error below? My statement ReactDOM.render(<App />, container); is 100% legit code.

My github repo: https://github.com/leongaban/react_starwars

The app.js file

import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'

require('index.html');

// Create app
const container = document.getElementById('app-container');

// Render app
ReactDOM.render(<App />, container);

The components/App file

import React from 'react'

const App = () =>
  <div className='container'>
    <div className='row'>

    </div>
    <div className='row'>

    </div>
  </div>;

export default App;

My webpack.config

const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.resolve(__dirname, './build'),
  filename: 'app.bundle.js',
},
module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'file-loader?name=[name].[ext]',
    },
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    },
  ],
},
plugins: [
  new webpack.NamedModulesPlugin(),
]
};

`ReactDOM.render(, container);` is not valid JS.. You can only use that inside a .JSX File. — xDreamCoding, May 30 '17 at 16:25
@xDreamCoding You can use it in a JS file as long as the JSX is transpiled to pure JS... — Andrew Li, May 30 '17 at 16:25
You'll want the REGEX for your loader test to also include a .js extension along with a .jsx. It may look like this: ```/\.(js|jsx)$/```, This will make sure that Webpack transpiles your app.js file as well as all of your source code. — Michael Lyons, May 30 '17 at 16:25
You've got lots of things wrong here. React should be capitalized on import, Dom in ReactDom should be capitalized. No need to import `index.html`. Also, your component import path should be `./components/App`. Next, you have to setup your Babel presets to transpile your code, `babel-preset-es2015` and `babel-preset-react`. — Andrew Li, May 30 '17 at 16:27
@MichaelLyons `/\.jsx?$` matches both .js and .jsx... the question mark is present — Andrew Li, May 30 '17 at 16:28

Julien · Accepted Answer · 2017-05-30T16:32:48.403

19

Use this as your webpack config file

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
    ],
},
plugins: [
    new webpack.NamedModulesPlugin(),
]
};

You are missing the presets

edited May 30 '17 at 16:32

answered May 30 '17 at 16:31

Julien

903
7
12

1

Thanks! This was it... I was following a tutorial from an older project. My newer React projects worked fine so it was the older outdated webpack.config I was using. And like others have said, I had miss-capitalized some of my imports. Thank you! I fixed the app with this more modern webpack.config and renamed my imports now it works. 3 more mins! – Leon Gaban May 30 '17 at 16:35
actually now with webpack 2 module.loader is been deprecated in favour of module.rules – Carmine Tambascia Jul 22 '19 at 14:15
Which one is the equivalent of presets: ['es2015', 'react'] regarding babel 7? – Carmine Tambascia Jul 23 '19 at 09:52
I am using .babelrc it works on another app but not working in the other one. – Ari Jul 24 '19 at 02:11

score 18 · Answer 2 · answered Jun 01 '18 at 11:34

18

I was getting the same error, and I simply needed to add a .babelrc file to the route of the project (same location as package.json) containing the following:

{
    "presets": [
        "env", 
        "react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

answered Jun 01 '18 at 11:34

Andy Smith

417
4
9

This was it for me, but I had to change `env` to `@babel/env`, and `react` to `react-app`. I'm using a project with Create React App + TypeScript + Rescripts (https://github.com/harrysolovay/rescripts) – Gus Apr 13 '20 at 11:26

score 5 · Answer 3 · answered Nov 21 '17 at 11:32

Install babel-preset-react for jsx syntax.

npm install babel-preset-react

presets

loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }
    ]

score 3 · Answer 4 · answered Jul 07 '19 at 10:03

3

Or you can put your presets in .babelrc file in the root of your project. Of course you need to install it first.

Like this /path/to/your/project/.babelrc

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

answered Jul 07 '19 at 10:03

Yury Lavrukhin

209
2
3

score 3 · Answer 5 · answered Jul 01 '20 at 08:53

Add .babelrc in the root folder with the following, and make sure it is 'presets' no 'preset'

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

here is my webpack.config.js for reference:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: { presets: ["@babel/env"]}
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ['*', '.js', '.jsx']},
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
}

Babel-loader v8 need @babel v7 to work package.json

  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0"}

score 1 · Answer 6 · answered May 30 '17 at 16:30

1

Try adding the resolve property to your webpack config file:

    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ["babel-loader"]
            }
        ]
    }

answered May 30 '17 at 16:30

Daniel Pérez

1,873
1
17
25

1

This is NOT the problem. Webpack already resolves .js by default. – Andrew Li May 30 '17 at 16:32

score 0 · Answer 7 · answered Jul 06 '19 at 11:44

If someone is working with CRA and get this error. Here the solution goes.

Goto package.json and add babel config. If I'm not seeming so generous, below is the code

 "babel": {
        "presets": [
            "react-app"
        ]
 }

Keep rest of CRA setup as it is. Actually CRA uses it's own custom preset react-app and that's what is setup in webpack.config.js file. Hence no need for other presets.

score 0 · Answer 8 · answered Feb 13 '20 at 10:40

I had this issue and none of the above answers helped.

I had a symbolically linked folder-- my code was on D:/Code but I was running from C:/Code via the symbolic link.

One of the js packages was recognizing the link and attempting to run within D and failing.

I had to open the code from D: and not from the symbolic link path, and the problem went away.

ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

8 Answers8

Linked