loadable-components: 无法异步加载组件

Question

I have created module A which is a component library for my React App.我创建了模块 A，它是我的 React 应用程序的组件库。 Which I plan on using on module B which is my actual React App.我计划在模块 B 上使用它，这是我实际的 React 应用程序。

I have an index.js whereby I export my components from module A by using loadable components in the following fashion我有一个 index.js，我通过以下方式使用可加载组件从模块 A 导出我的组件

import loadable from '@loadable/component'

export const Theme = loadable(() => import('./Theme'))
export const OtherComponent = loadable(() => import('./OtherComponent'))
export const OtherComponent2 = loadable(() => import('./OtherComponent2'))

I therefore build and deploy module A to npm by using the following webpack configuration因此，我使用以下 webpack 配置构建和部署模块 A 到 npm

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin")
const LoadablePlugin = require('@loadable/webpack-plugin')

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: false,
    minimizer: [new TerserPlugin({
      terserOptions: {
        keep_fnames: true
      }
    })],
    
  },
  entry: {
    main: './src/components/index.js',
  },
  output: {
    publicPath: '/',
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
    library: "myComponentLibrary", 
    libraryTarget: "umd",
    globalObject: "this"
  },
  externals: {
    react: {
      root: 'React',
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
    },
  },
  plugins: [new CleanWebpackPlugin(), new LoadablePlugin()],
  module: {
    rules: [
     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true
            }
          }
        ],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset/inline'
      },
    ]
  }
}

I expected that when I npm install module A on module B to be able to import and render my components but instead I get the following error.我希望当我在模块 B 上 npm install 模块 A 能够导入和呈现我的组件时，但我收到以下错误。

loadable-components: failed to asynchronously load component { fileName: undefined, chunkName: undefined, error: 'Loading chunk 2661 failed.\\n(error: 2661.js)' } loadable-components: 无法异步加载组件 { fileName: undefined, chunkName: undefined, error: 'Loading chunk 2661 failed.\\n(error: 2661.js)' }

Please provide some guidance on how I can solve this issue请提供一些有关我如何解决此问题的指导

Answer 1

Add this <base href="/"/> to head of index.html:将此<base href="/"/>到 index.html 的头部：

<!DOCTYPE html>
<html>
    <head>
        <base href="/"/>
        <meta charset="utf-8" />
        <title>Foo project</title>
    </head>

    <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>

Now, I think everything is working well.现在，我认为一切都运行良好。 This problem is because of html5 routing, you can search about it.这个问题是因为html5路由，可以搜索一下。

loadable-components: 无法异步加载组件

问题描述

1 个解决方案

解决方案1
0 2021-12-27 18:25:40

loadable-components: 无法异步加载组件

问题描述

1 个解决方案

解决方案1 0 2021-12-27 18:25:40

解决方案1
0 2021-12-27 18:25:40