Creé el módulo A, que es una biblioteca de componentes para mi aplicación React. Que planeo usar en el módulo B, que es mi aplicación React real.

Tengo un index.js mediante el cual exporto mis componentes del módulo A usando componentes cargables de la siguiente manera

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

Por lo tanto, construyo e implemento el módulo A en npm usando la siguiente configuración de paquete web

 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' }, ] } }

Esperaba que cuando instalara npm el módulo A en el módulo B pudiera importar y renderizar mis componentes, pero en su lugar aparece el siguiente error.

componentes cargables: no se pudo cargar de forma asíncrona el componente { fileName: indefinido, chunkName: indefinido, error: 'Error al cargar el fragmento 2661.\n(error: 2661.js)' }

Proporcione alguna orientación sobre cómo puedo resolver este problema.