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

8ehkhllq 于 2024-01-08 发布在 Webpack

关注(0)|答案(1)|浏览(148)

我尝试使用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

webpack

来源：https://stackoverflow.com/questions/77592432/webpack-dev-server-doesnt-recognize-jsx-code

1条答案

按热度按时间

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

型

展开查看全部

赞(0）回复(0）举报 2024-01-08

我来回答

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

1条答案

相关问题

热门标签

最新问答