3

I have created module A which is a component library for my React App. Which I plan on using on module B which is my actual React App.

I have an index.js whereby I export my components from module A by using loadable components in the following fashion

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

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.

loadable-components: failed to asynchronously load component { fileName: undefined, chunkName: undefined, error: 'Loading chunk 2661 failed.\n(error: 2661.js)' }

Please provide some guidance on how I can solve this issue

Ayabonga Qwabi
  • 306
  • 5
  • 12

1 Answers1

0

If everything is working well on development but for production is not and you face with this error, Add this <base href="/"/> to head of 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.

Mohammadrez Taheri
  • 53
  • 7