While compiling my react app I am getting Module build failed: SyntaxError: Unexpected token

Question

I have attached the required code below, I would appreciate if anyone can help me with it.

My app.js is:

import React from 'react';
import ReactDOM from 'react-dom';
import IndecisionApp from './components/IndecisionApp';
import 'normalize.css/normalize.css';
import './styles/styles.scss';

ReactDOM.render(<IndecisionApp />, document.getElementById('app'));

The error is:

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Failed to compile.
webpack: Compiling...
Hash: 66aec74626cbf614b013
Version: webpack 3.1.0
Time: 22ms
  [84] ./src/app.js 691 bytes {0} [built] [failed] [1 error]
    + 84 hidden modules

ERROR in ./src/app.js
Module build failed: SyntaxError: Unexpected token (7:16)

  5 | import './styles/styles.scss';
  6 | 
> 7 | ReactDOM.render(<IndecisionApp />, document.getElementById('app'));
    |                 ^
  8 | 

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Failed to compile.

Link to complete code: https://github.com/bhatvikrant/IndecisionApp

latest error msg:

ERROR in ./src/app.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/Users/VIKRANT/Desktop/Indecision App/node_modules/@babel/preset-env/lib/index.js")
    at throwVersionError (/Users/VIKRANT/Desktop/Indecision App/node_modules/@babel/helper-plugin-utils/lib/index.js:65:11)
    at Object.assertVersion (/Users/VIKRANT/Desktop/Indecision App/node_modules/@babel/helper-plugin-utils/lib/index.js:13:11)
    at /Users/VIKRANT/Desktop/Indecision App/node_modules/@babel/preset-env/lib/index.js:177:7
    at /Users/VIKRANT/Desktop/Indecision App/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-loader/lib/index.js:49:20)
    at Object.module.exports (/Users/VIKRANT/Desktop/Indecision App/node_modules/babel-loader/lib/index.js:174:20)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Failed to compile.

Please share your `webpack.config`. Most likely you forgot to add `'@babel/preset-react'` — Arseniy-II, Oct 24 '19 at 06:01
There's a problem with compiling your JSX, it's not recognised by webpack. Probably you missed setting up babel in webpack.config.js, so please share this file with us. — Andrey Kostenko, Oct 24 '19 at 06:04
I have added the github link to the repo, please have a look — Vikrant Bhat, Oct 24 '19 at 06:06
@Arseniy-II can you please be more specific? a code snippet will be better. — Vikrant Bhat, Oct 24 '19 at 06:09

Arseniy-II · Answer 1 · 2019-10-24T06:46:11.903

1

You didn't configured your babel. There is two ways to fix that:

1) Either update your webpack.config:

//...
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            /**
             * Use modules: false, otherwise hot-reloading will be broken
             */
            presets: [
                '@babel/preset-env',
                '@babel/preset-react'
            ],
        }
    }
},
//...

2) Or create .babelrc file in root directory (usually it is recommended) like this:

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

Also don't forget to install babel dependencies:

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

edited Oct 24 '19 at 06:46

answered Oct 24 '19 at 06:14

Arseniy-II

8,323
5
24
49

1

There is also the third way, you can add ```"babel"``` section to your ```package.json``` with the similar content (e.g. if you don't want to create an extra ```.babelrc``` file). – Andrey Kostenko Oct 24 '19 at 06:29
@Arseniy-II The root directory is the src folder or the public folder? Sorry for such a basic question, I am quite a novice at the moment – Vikrant Bhat Oct 24 '19 at 06:30
@VikrantBhat it is folder where your `webpack.config.js` and `package.json` – Arseniy-II Oct 24 '19 at 06:32
I did the second approach suggested by you, still getting some new error: – Vikrant Bhat Oct 24 '19 at 06:33
@VikrantBhat is it working fine now? Or you have other obstacles? – Arseniy-II Oct 24 '19 at 06:33
@VikrantBhat please add full error report in to your question – Arseniy-II Oct 24 '19 at 06:38
@Arseniy-II I have added the full screenshot of what I have done. – Vikrant Bhat Oct 24 '19 at 06:42
@VikrantBhat 1) wrong folder for `.babelrc` you have `./src/.babelrc` should be `./.babelrc` 2) don't forget to `npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev` I have updated my answer – Arseniy-II Oct 24 '19 at 06:47
@Arseniy-II Still getting an error in the version of babel, should I update it? I have updated my question with the error message – Vikrant Bhat Oct 24 '19 at 06:55
@VikrantBhat you should remove old babel dependencies `"babel-core": "6.25.0",` and use new one: ` "@babel/core": "^7.6.4"`. It looks like you have copied your repo from some place I recommend you to start new project from scratch and understand each step instead of trying to dive into someones code. – Arseniy-II Oct 24 '19 at 07:05
Okay, thanks for the suggestion. But I do understand the code only the webpack thing is a bit difficult for me to understand. – Vikrant Bhat Oct 24 '19 at 07:08
@Arseniy-II if you have a look at package.json, you will see that @babel/core: "^7.6.4" is there under devDependencies, should I remove it from there and add to dependencies? – Vikrant Bhat Oct 24 '19 at 07:10
devDependencies is a better place for `@babel/core: "^7.6.4"` than `dependencies` – Arseniy-II Oct 24 '19 at 07:55

While compiling my react app I am getting Module build failed: SyntaxError: Unexpected token

1 Answers1