Webpack не может скомпилироваться в приложении реакции - PullRequest
Новая
       1

Webpack не может скомпилироваться в приложении реакции

1 голос
/ 28 января 2020

Я пытаюсь настроить веб-пакет в реактивном проекте, созданном без create-реагировать-приложение, у меня появляется эта ошибка при запуске npm Запустить веб-пакет. 

8.78 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./lib/app.js] 4.7 KiB {main} [built] [failed] [1 error]

ERROR in ./lib/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/code/react-advanced/lib/app.js: Unexpected token (5:2)

  3 | 
  4 | const App = () => {
> 5 |   <h2>Hello there!</h2>;
    |   ^
  6 | };
  7 | ReactDom.render(<App />, document.getElementById('root'));

webpack.config. js: 

const path = require('path');

module.exports = {
  entry: './lib/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [{ test: /\.(js|jsx)$/, use: 'babel-loader' }]
  }
};

пакет. json: 

"dependencies": {
"@babel/core": "^7.8.3",
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"express": "^4.17.1",
"nodemon": "^2.0.2",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"


},

что может быть не так ??

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Подсказка заключается в том, на что указывает курсор в сообщении об ошибке: 

SyntaxError: /Users/code/react-advanced/lib/app.js: Unexpected token (5:2)

  3 | 
  4 | const App = () => {
> 5 |   <h2>Hello there!</h2>;
    |   ^

Обратите внимание, что в строке 5 есть стрелка, указывающая на тег JSX <h2>.

Проблема в том, что Babel не понимает JSX сам по себе.

Вам необходимо добавить пресет React вручную, чтобы сделать это.

  1. Первая установка @babel/preset-react: 

    npm install --save-dev @babel/preset-react

  2. Затем сообщите об этом Babel, обновив конфигурацию вашего веб-пакета (или создав файл конфигурации Babel рядом с вашим конфигурацией веб-пакета): 

    module: {
  rules: [{
    test: /\.(js|jsx)$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-react']
      }
    }
  }]
}

Подробнее здесь:

Кроме того, вам необходимо вернуть элемент h2 из App: 

const App = () => {
   return <h2>Hello there!</h2>;
};
0 голосов
/ 28 января 2020

В React компоненты должны возвращать то, что может быть визуализировано. В вашем сценарии вы пропускаете оператор return в вашем app.js. 

const App = () => {
   return <h2>Hello there!</h2>;
};
...