webpack无法在React应用中编译

Question

我正在尝试在未创建create-react-app的React项目中配置webpack，运行npm run webpack时出现此错误。

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' }]
  }
};

package.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"


},

可能出什么问题？

Answer 1

在React中，组件应返回可以渲染的内容。在您的情况下，您在return中缺少app.js语句。

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