javascript - loadable component require not found with webpack

Question

I am trying to learn how to do code-splitting through dynamic imports, but unfortunately I am getting an error as follows:

Uncaught (in promise) ReferenceError: require is not defined
    at Function.requireEnsure [as e] (bootstrap:90)
    at Object.importAsync (lazyLoader.tsx:4)
    at Object.requireAsync (lazyLoader.tsx:4)
    at InnerLoadable.loadAsync (loadable.esm.js:235)
    at InnerLoadable.componentDidMount (loadable.esm.js:167)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)

And in the error is happening in the following line:

const LoginPage = loadable(
  () => import('Pages/login'),
  { fallback: <CardListSkeleton /> }
);

Webpack.config as follows:

module.exports = {
  devtool: 'inline-source-map',
  context: __dirname,
  target: 'node',
  entry: ['./src/index.tsx'],
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node-modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.s?[a|c]ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.svg$/,
        use: ['svg-inline-loader'],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
      {
        test: /\.jpeg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
  resolve: {
    modules: [path.resolve('src'), 'node_modules'],
    extensions: ['.tsx', '.ts', '.js'],
    alias: Aliases,
  },
  output: {
    publicPath: '/',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist/'),
  },
  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
    compress: true,
    contentBase: path.resolve(__dirname, 'src/'),
    open: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './assets/index.html',
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv),
        APP_NAME: JSON.stringify(APP_NAME),
        SERVER_URL: JSON.stringify(process.env.SERVER_URL),
        SERVER_PORT: JSON.stringify(process.env.SERVER_PORT),
      },
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[name].[hash].css',
    }),
    new LoadablePlugin({ writeToDisk: true }),
  ],
};

I also have a babel.config.js:

module.exports = {
    "ignore": [/[/\\]core-js/, /@babel[/\\]runtime/],
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript",
        "@babel/preset-react"
    ],
    "plugins": [
        "@loadable/babel-plugin",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-syntax-dynamic-import"
    ]
}

标签： javascripttypescriptwebpackloadable-component