3

I am trying to build my react project using webpack and babel but I don't understand why it generates the below error. I have setup the .babelrc and webpack.config.js files as follows still don't understand what is wrong and why it doesn't recognize jsx.

Please let me know your valuable comments.

Thanks

[./src/index.js] 802 bytes {main} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (25:1)

  23 | 
  24 | ReactDOM.render(
> 25 |  <Provider store={store} >
     |  ^
  26 |      <App />
  27 |  </Provider>
  28 |   ,

 @ multi (webpack)-dev-server/client?http://localhost:4000 ./src/index.js
ℹ ｢wdm｣: Failed to compile.

.babelrc

{
  "presets": ["env", "stage-0"]
}

webpack.config.js

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: __dirname + "public/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./public",
    port: 4000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
            presets: ['env','stage-0',]
        },
      },
      {
        test: /\.json$/,
        exclude: /(node_modules)/,
        loader: 'json-loader'
      }
    ]
  }
}

Directory structure

├── graph_generator
│   ├── arrows_candlesticks_graph_set2_v1.py
│   ├── data.json
│   ├── graph_generator.py
│   ├── json_reader.py
│   └── test.py
├── package.json
├── public
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
├── src
│   ├── actions.js
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   ├── containers
│   │   │   ├── Graph.js
│   │   │   ├── MyPlot.js
│   │   │   └── Params.js
│   │   └── ui
│   │       ├── App.css
│   │       ├── Graph.js
│   │       ├── MyPlot.js
│   │       └── Params.js
│   ├── config.js
│   ├── constants.js
│   ├── data.json
│   ├── index.css
│   ├── index.js
│   ├── index.js.back
│   ├── initialState.js
│   ├── logo.svg
│   ├── registerServiceWorker.js
│   ├── store
│   │   ├── index.js
│   │   └── reducers.js
│   └── stylesheets
│       └── Params.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

Solution

EDIT

Problem solved after I installed 

yarn add babel-preset-react --dev

and then changed my preset as you can see below:

rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
        presets: ['env','stage-0',]
    },
  },
Mike IT
  • 329
  • 1
  • 3
  • 19
  • 1
    You don't have react in the presets – anttud Jun 12 '18 at 10:11
  • 2
    As anttud is saying: https://stackoverflow.com/a/33460642/1351277 – Mihai Alex Jun 12 '18 at 10:15
  • @MihaiAlex thanks for the reply indeed. I installed yarn add babel-preset-react --dev and then I changed my webpack.config.js to the one I edited in the question and now it the code understands the the angular react tags as I expected. – Mike IT Jun 12 '18 at 11:42
  • 1
    For newer versions of react , use the new babel modules : https://stackoverflow.com/a/53927497/6665568 . It has better error messages and supports new features of react. – Natesh bhat Dec 26 '18 at 04:46

1 Answers1

1

add this to the rules' array in webpack.config.js and see if the problem is solved:

        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }
Ashkan
  • 846
  • 11
  • 20
  • I changed my webpack.config.js babel loader presets to this. `{ test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader', options: { presets: ['react',] }, ` also installed `yarn add babel-preset-react` – Mike IT Jun 12 '18 at 11:43