How do I use webpack dynamic imports inside an NPM package?

Question

I have a navbar npm package that I import into other projects. It dynamically imports FontAwesome icons based on a JSON config file loaded from a web server at runtime.

When I build the navbar package, the entire FontAwesome library ends up as chunks in the build directory, as I would expect.

When I import that navbar module in another project, that project's build does not include the FontAwesome chunks. So the dynamic import HTTP calls get a 404.

I can't find much about this use case online, possibly because I don't know the terms to look for, possibly because this is a terrible idea in the first place.

How can I get webpack to see that a package has dynamic imports and to copy over the necessary chunks to the build directory?

Alethiaaletta

Same issue for me... Any solution ? – Progestin

Same issue here – Handicapped

@Alethiaaletta Any progress? I have the same issue – Infrangible

I don't remember what i ended up doing, but I don't think i ever figured out this specific question. – Alethiaaletta

This might be a stupid question, but do you have font-awesome included as a dependency? – Dramaturge

Answer 1

You can try running npm publish --dry-run to see what gets published and if its missing anything compared to your build folder.

You can also try running npm publish <path to build folder>.

Full documentation here: https://docs.npmjs.com/cli/v7/commands/npm-publish

Poliomyelitis