reactjs - next.config.js 中的@babel/preset-react 未使用 babel-loader 加载

Question

我的 webpack 没有正确转换我的 jsx（可能还有样式组件），所以我认为 babel 没有正确运行！我不确定是样式组件不起作用还是直接反应。

我收到SyntaxError: Unexpected token '<'

next.config.js

module.exports = withImages({
  publicRuntimeConfig: {
    ...config,
  },
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new CopyWebpackPlugin([
        {
          from: path.join(
            __dirname,
            process.env.ENV !== 'production'
              ? 'favicons/staging/favicon.ico'
              : 'favicons/production/favicon.ico',
          ),
          to: path.join(__dirname, 'public/favicon.ico'),
        },
        {
          from: path.join(
            __dirname,
            process.env.ENV !== 'production'
              ? 'favicons/staging/favicon'
              : 'favicons/production/favicon',
          ),
          to: path.join(__dirname, 'public/favicon/'),
        },
      ]),
    )

    config.module.rules.push({
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel', '@babel/preset-env', '@babel/preset-react'],
            plugins: [
              'babel-plugin-styled-components',
              "@babel/plugin-proposal-export-default-from",
              "@babel/plugin-proposal-export-namespace-from",
              [
                "babel-plugin-root-import",
                {
                  "paths": [
                    {
                      "rootPathPrefix": "~",
                      "rootPathSuffix": ""
                    }
                  ]
                }
              ],
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose": true }]
            ],
          },
        },
      ],
    })

    return config
  },
})

标签： reactjswebpackbabeljsnext.jsstyled-components