webpack 无法解析子组件中的 material ui 按钮

Question

我正在尝试将一些 React 组件与 webpack 捆绑在一起。

但是当我启动 webpack --mode=development 时，我得到这个错误：

Module parse failed: Unexpected token (6:4) 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 | const OwnButton = () => { | return ( <Button color='secondary' variant='outlined'

这是我的 webpack 配置：

const path = require('path');

module.exports = {
   entry: './src/app.js', // relative path
   output: {
      path: path.join(__dirname, 'public'), // absolute path
      filename: 'js/bundle.js' // file name
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
         }
      ]
   }
};

这是我的 app.js 配置：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import OwnButton from './Components/OwnButton';

const template = <Button>Hello from react jsx</Button>;

ReactDOM.render(template, document.getElementById('root'));
ReactDOM.render(<OwnButton/>, document.getElementById('React-OwnButton'));

和想要的组件（index.jsx）：

import Button from '@material-ui/core/Button';

const OwnButton = () => {
  return (
    <Button color='secondary' variant='outlined'>
      Hello from my own component
    </Button>
  );
};

export default OwnButton;

还有我的 .babelrc

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

我不明白 app.js 上的调用 l.6 是如何工作的，但 index.jsx l.6.

上的调用不起作用

在 babel 中，我必须将加载器放在哪里？

Answer 1

问题是您将 Babel Loader 配置为仅干预 .js 个文件。

尝试更改：test: /\.js$/ -> test: /\.((js)|(jsx))$/

这将使加载程序也适用于 .jsx 个文件。

webpack 无法解析子组件中的 material ui 按钮

webpack can't parse material ui button in a child component

javascript

reactjs

webpack

babeljs