При компиляции моего реагирующего приложения я получаю сбой сборки модуля: SyntaxError: Неожиданный токен

Question

Я приложил требуемый код ниже, я был бы признателен, если кто-нибудь может помочь мне с ним.

Мой app.js:

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

Ошибка:

 @ 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.

Ссылка на полный код: https://github.com/bhatvikrant/IndecisionApp

последнее сообщение об ошибке:

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.

Answer 1

Вы не настроили babel. Есть два способа исправить это:

1) Либо обновите ваш 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) Или создайте файл .babelrc в корневом каталоге (обычно это рекомендуется), какэто:

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

Также не забудьте установить зависимости babel:

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