Webpack 加载程序错误：Salesforce Lightning Design React App答案

【问题标题】：Webpack loader error: Salesforce Lightning Design React AppWebpack 加载程序错误：Salesforce Lightning Design React App
【发布时间】：2020-03-20 14:58:53
【问题描述】：

我在尝试使用 React Lightning Design 运行我的应用程序时收到以下错误

./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'),
                ]
            },

【问题讨论】：

标签： javascript reactjs webpack salesforce salesforce-lightning

【解决方案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',
    ]
  },
};

【讨论】：