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

25
votes

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

enter image description here

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(),
]
};
8
javascriptreactjsreact-dom
ReactDOM.render(<App />, container); is not valid JS.. You can only use that inside a .JSX File. - xDreamCoding
@xDreamCoding You can use it in a JS file as long as the JSX is transpiled to pure JS... - Andrew Li
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
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
@MichaelLyons /\.jsx?$ matches both .js and .jsx... the question mark is present - Andrew Li

8 Answers

18
votes

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

17
votes

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

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']
            }
        }
    ]
3
votes

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

2
votes

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"}
1
votes

Try adding the resolve property to your webpack config file:

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

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.

0
votes

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.