Loadable-Components as extenal components library with Next.JS

Question

I am trying to use a component library that I created to reuse in other projects. In it I used loadable-components with webpack and code splitting.

But, when importing into a Next.js project, errors are returned, showing that you cannot import the component from that library.

I have two projects:

• Project A = Component library
• Project B = Will import Project A

Project B that imported the library (Project A):

(node:20271) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'SomeComponent' of undefined

Config of the imported library (Project A):

webpack.build.config.js

module.exports = {
...
  entry: {
    [packageName]: './src/index.js'
  },

  target: 'web',

  output: {
    chunkFilename: '[chunkhash].chunk.js',
    library: packageName,
    libraryTarget: 'commonjs2',
    globalObject: 'this'
  },

  externals: nodeExternals(),
  
  optimization: {
    minimize: true,
    usedExports: true,
    splitChunks: {
      chunks: 'all',
    },
  },

  plugins: [
    new LoadablePlugin()
  ],
...
}

src/index.js

import styled, { ServerStyleSheet, createGlobalStyle } from 'styled-components';
export * from '@components';
export * from '@style';
export { default as Icons } from '@assets/icons';
export { styled, ServerStyleSheet, createGlobalStyle };

Above, only the @components folder has loadable-components

.babelrc

{
  "plugins": [
    "styled-components",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    [
      "@babel/plugin-proposal-optional-chaining",
      {
        "loose": false
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@loadable/babel-plugin"
  ]
}

In the Project B, I only import this library with the generated chunks.

But, the same error is always shown, regardless of whether the component is loaded on demand or not.

What am I doing wrong? Any suggestion?

Thanks!