Webpack 加載器錯誤：Salesforce Lightning Design React App

Question

嘗試使用 React Lightning 設計運行我的應用程序時收到以下錯誤

./node_modules/@salesforce/design-system-react/components/button/index.jsx 38:20
Module parse failed: Unexpected token (38:20)
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
|  */
| class Button extends React.Component {
>   static displayName = BUTTON;
| 
|   static propTypes = {

我在 webpack.config.js 文件中配置了以下加載器配置：

loaders: [
            {
                test: /\.jsx?$/,
                loaders: ['babel'],
                include: [
                    path.join(__dirname, 'public/src'),
                    path.join(__dirname, 'node_modules/@salesforce/design-system-react'),
                ]
            },

Answer 1

這與 babel 插件有關。

更具體地說：@babel/plugin-proposal-class-properties
https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

const babelLoader = {
  loader: 'babel-loader',
  options: {
    babelrc: false,
    presets: [
      ['@babel/preset-env', {
        targets: { browsers: ['>1%', 'not chrome < 59'] }
      }],
      '@babel/preset-react',
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-proposal-export-default-from',
      '@babel/plugin-proposal-export-namespace-from',
    ]
  },
};