ReactJS module build error: SyntaxError: Unexpected token - ReactDOM.render

Question

ReactJS module build error: SyntaxError: Unexpected token - ReactDOM.render

Why am I getting this error below? My claim ReactDOM.render(<App/>, container);

is 100% legal code.

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

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);

Application components / 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(),
]
};

+15

javascript reactjs react-dom

Leon gaban May 30 '17 at 16:22

source to share

6 answers

I got the same error and I just needed to add a .babelrc file to the project route (in the same location as package.json) containing the following:

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

+8

Andy smith 01 june 18 at 11:34

source to share

Install babel-preset-response for jsx syntax.

npm install babel-preset-react

presets

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

+5

Sridhar 21 nov. 17 at 11:32

source to share

Try adding the property resolve

to your webpack config file:

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

+1

Daniel Pérez 30 May '17 at 16:30

source to share

If anyone is working with CRA and get this error. Here's the solution goes.

Go to package.json

and add configuration babel

. If I don't seem so generous, below is the code

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

Leave the CRA setting unchanged. Actually CRA uses its own pre-installed react-app

and what is configured in the file webpack.config.js

. Hence, there is no need for other presets.

0

kushalvm 06 jul. At 11:44

source to share

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

/path/to/your/project/.babelrc

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

0

Yury Lavrukhin 07 jul. 19 at 10:03

source to share

Julien · Accepted Answer · 2017-05-30T16:31:09+0000

Use this as 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 presets

ReactJS module build error: SyntaxError: Unexpected token - ReactDOM.render

More articles: