webpack: Dynamic import from node_modules is not working

Bug report

What is the current behavior?

I made a vue component package my-custom-comp, which contains dynamic import: my-custom-comp.vue

<template>
  <component v-if="id && data" :is="`list-${id}`" :data="data" />
</template>

<script>
export default {
  props: ['id','data'],
  components: {
    'list-1': () => import(/* webpackChunkName: "MyTaglist0" */'./list-1.vue'),
    'list-2': () => import(/* webpackChunkName: "MyTaglist0" */'./list-2.vue'),
    'list-3': () => import(/* webpackChunkName: "MyTaglist1" */'./list-3.vue'),
    'list-4': () => import(/* webpackChunkName: "MyTaglist1" */'./list-4.vue')
  }
}
</script>

Output files in lib:

  my-custom-comp.common.js
  my-custom-comp.common.MyTaglist0.js
  my-custom-comp.common.MyTaglist1.js

I have my-custom-comp package installed in my app, and add package path to resolve.modules: webpack.config.js

module.exports = {
  ...
  resolve: {
    modules: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../node_modules/my-custom-comp/lib')],
  }
  ...
}

but MyTaglist0.js can’t be resolved:

GET http://localhost:8882/my-custom-comp.common.MyTaglist0.js net::ERR_ABORTED 404 (Not Found)

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

How to resolve dynamic import from node_modules?

Other relevant information: webpack version: 4.28.4 Node.js version: 10.3.0 Operating System: windows Additional tools:

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 20 (8 by maintainers)

Most upvoted comments

bump

+10

alexander-akait on Oct 15, 2019

@evilebottnawi Please look at this repo: https://github.com/Miaoxingren/webpack-issue-8934.

Miaoxingren on Mar 26, 2019

Hi,

It’s possible to dynamically import relative modules:

const LazyComponent = lazy(() => import('/folder/${fileVariable}'))``

But I’m not being able to dynamically load external libraries from variables. I’m creating react component libraries, which I’m then using to lazy load as routes, but while this works with a static import:

const LazyComponent = lazy(() => import('my-package'))

It doesn’t if I pass in a variable:

const packageOne = 'my-package' const LazyComponent = lazy(() => import(packageOne))

Error: Cannot find module ‘‘my-package’’

I’ve tried with a couple of magic comments from webpack like the example below, but nothing worked so far:

const LazyComponent = lazy(() => import(/* webpackIgnore: true */ packageOne))

Thanks

rubenberna on Oct 20, 2021