Webpack 加载器错误：Salesforce Lightning Design React App

Question

I am receiving the following error when trying to run my application with 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 = {

I have configured at webpack.config.js file with the following loader config below:

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

Answer 1

This is relevant to babel plugins.

And to be more specific: @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',
    ]
  },
};