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: –

Author: Fantashit

3 thoughts on “Import an exception behavior of a module that uses `import()` internally

  1. 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.

  2. 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, 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.

Comments are closed.