webpack dev服务器无法识别JSX代码

8ehkhllq  于 11个月前  发布在  Webpack
关注(0)|答案(1)|浏览(119)

我尝试使用webpack-dev-server运行React项目。项目运行,但当我使用yarn run webpack-dev-server启动dev服务器时,我收到以下消息:

ERROR in ./app/javascript/components/index.jsx 9:14
Module parse failed: Unexpected token (9:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     document.body.appendChild(document.createElement("div"))
|   );
>   root.render(<App />);
| });

字符串
我的工具链中缺少了什么?完整的存储库可在这里找到:https://github.com/fredwillmore/billboard

kyks70gy

kyks70gy1#

我只是看得不够远-使用babel来转译JSX是下一步:

yarn add @babel/core @babel/preset-env @babel/preset-react

字符串
create./babel.js

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
};


update./webpack.js

module.exports = {
  entry: './app/javascript/components/index.jsx',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

相关问题