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

user_168738 0
Viewed 41171

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(),
]
};
react-dom reactjs javascript
8 Answers

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

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']
            }
        }
    ]
user_82875560

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

user_105716760

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

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.

user_10961940

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.

user_59617930
Related