SyntaxError: 不能在模塊外使用 import 語句是什么意思？

Question

我正在使用帶有 SSR (express) 的 React JS，當我啟動服務器時出現錯誤。 C:\\PROPJECTS\\SSR+1\\plusone\\node_modules\\antd\\es\\empty\\style\\css.js:1 import '../../style/index.css'; ^^^^^^ SyntaxError: 不能在模塊外使用 import 語句你能解釋一下如何解決這個問題嗎？

我的 WP 配置

const path = require('path');
const Html = require('html-webpack-plugin');
const { CleanWebpackPlugin: Clean } = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');

const MomentLocales = require('moment-locales-webpack-plugin');

module.exports = {
  entry: {
    editor: './src/editor.entrypoint.js',
    public: './src/public.entrypoint.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|jpeg|gif|woff|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets',
        },
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
      clearText: path.resolve(__dirname, 'src/clearText.js'),
      components: path.resolve(__dirname, 'src/components/'),
      connectors: path.resolve(__dirname, 'src/connectors/'),
      containers: path.resolve(__dirname, 'src/containers/'),
      contexts: path.resolve(__dirname, 'src/contexts/'),
      fonts: path.resolve(__dirname, 'src/fonts/'),
      helpers: path.resolve(__dirname, 'src/helpers.js'),
      hooks: path.resolve(__dirname, 'src/hooks/'),
      mock: path.resolve(__dirname, 'src/mock/'),
      img: path.resolve(__dirname, 'src/img/'),
      pages: path.resolve(__dirname, 'src/pages/'),
      utils: path.resolve(__dirname, 'src/utils/'),
      slice: path.resolve(__dirname, 'src/slice/'),
    },
  },
  plugins: [
    new MomentLocales(),
    new Clean(),
    new Copy([{ from: 'public', to: '.' }]),
    new Html({
      chunks: ['public'],
      hash: true,
      scriptLoading: 'defer',
      template: 'public/index.html',
    }),
    // new BundleAnalyzer(),
  ],
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    overlay: {
      warnings: true,
      errors: true,
    },
    port: 3000,
    proxy: {
      '/api': {
        target: 'https:.../',
        secure: false,
        changeOrigin: true,
      },
      '/files': {
        target: 'https://...',
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

Answer 1

Babel 必須在您的 express 服務器中正確配置，以便您可以使用 import 語句和 es6 語法。