webpack: Import an exception behavior of a module that uses `import()` internally

Bug report

What is the current behavior?

I am developing a vue plugin that is built using @vue/cli 3.0.0-rc.10. Additional features can be loaded via option options when installing the plugin (asynchronously loaded via import()).

If you import it using <script>, it will work fine. But there was a problem when importing via webpack:

Here webpack gets extra functionality by asynchronously loading the script element, but this file is not copied to publicPath, causing the file to not exist and cannot be loaded.

What is the expected behavior?

I am not sure if the current behavior is expected, but I think it should be copied to publicPath and the module loaded correctly.

Other relevant information: webpack version: v4.16.4 Node.js version: v9.11.1 Operating System: macOS High Sierra Version 10.13.6 Additional tools: -

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 18 (7 by maintainers)

Commits related to this issue

Updated package.json to use module rather than main This is due to the fact that dynamic imports aren't properly handled by subsequent webpack builds, or at least, I don't know how to write a webpack... — committed to gurupras/svg-file-icons by gurupras 5 years ago

Most upvoted comments

i’ve got exactly the same situation, the library im working on is using dynamic imports, after publishing it (with files option from package.json to publish all generated stuff from webpack) im not able to use the lib in different projects. I guess because chunks generated by webpack during dynamic imports cant be loaded from main.js file (entry point to the app). Im really keen to get to some information if somebody has made it working.

kezugo on Sep 20, 2018

bump

alexander-akait on Dec 25, 2019

I ran into the same problem as well. I did manage to find a ‘solution’ for it though.

@sokra If you can clone and npm link https://github.com/gurupras/repo-for-webpack-issue-7843, you will find that webpack has cleanly generated JS files for a few hundred icons along with a bundle.js which is supposed to be the entry point.

If I now link this repo within, say, a VueJS project (you can do this within the docs directory of the same project) and call import FileIcons from '@gurupras/svg-file-icons' in App.vue it wont error out, but all dynamic imports referenced by the bundle.js will fail to load because they aren’t being copied over by Vue’s subsequent webpack build.

Currently, I managed to solve this issue by importing the source rather than the built umd result. In my case:
import FileIcons from '@gurupras/svg-file-icons/src/file-icons' works
import FileIcons from '@gurupras/svg-file-icons/dist/bundle.js' will eventually 404 on dynamic import

The problem, however, is that this ‘solution’ requires the end-user to re-bundle.

gurupras on Jan 6, 2019

Just wanted to drop in and say that this is still a problem. I’m curious if anyone has found a better solution than just re-bundling the module like mentioned above. I think it is not an issue for most people to re-bundle, but it’s rather annoying that it is required to deploy a package that way.

Mando75 on Mar 16, 2020

bump

alexander-akait on Sep 24, 2019