Code splitting in library mode causes undefined component import

Bug report

What is the current behavior? When code splitting used (common chunk usage) imported component resolved as undefined. I don’t want to include shared code in each component import but i cannot achieve this with chunks or dependOn.

Library module import without code splitting

Library module import with code splitting

If the current behavior is a bug, please provide the steps to reproduce. Repository to reproduce: https://github.com/xleepy/webpack-library-code-splitting

What is the expected behavior? Module should not return undefined module in case common chunk used (at least i hope)

Other relevant information: webpack version: 5.75.0 Node.js version: v18.12.1 Operating System: Xubuntu 22.04.1/macOS Additional tools:

Thanks for any suggestion!

[alexander-akait]

@xleepy I recommend bundle (or even more - don’t bundle at all) icons as a separate library and put in TODO how to use them, it’s possible if you (an another developer) want to customize icons. Example:

function Welcome(props) {
  return <img src={props.icon}>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome icon={new URL("my-library-icons/welcome.svg", import.meta.url)} />;
root.render(element);

Also developer can:

• optimize svg
• allow to setup any public path (it will be solved on the bundle side)
• use it in browsers without bundlers
• split code as wants

[xleepy]

Thanks for advice! Wish you a nice day!