Error: Cannot find module with dynamic import

[leohubert]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

When I try to load dynamic module with import('/path/to/my/module.js').then() it work, but when i try to import module with import(rootPath + '/' + myModuleName + '/index.js').then() it doesn't work.

I got:

 Error: Cannot find module '/Users/hubert_i/Emodyz/launcher-ezgames.eu/modules/test/index.js'.
      at /Users/hubert_i/Emodyz/launcher-ezgames.eu/dist/electron/main.js:10475:9
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

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

What is the expected behavior?

Dynamic import with variable

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

webpack => 3.10.0
npm => 5.6.0
yarn => 1.5.1
Node.js => v9.6.1
Operating System => macOs High Sierra

[ooflorent]

What is the version of webpack used here?

[leohubert]

It's written in the description 😄
webpack 3.10.0

[leohubert]

It's incomprehensible 😢

If i write this it work

import( '/Users/hubert_i/Emodyz/launcher-ezgames.eu/modules/test/index.js')
  .then((m) => {
    console.log(m.name)
  })
  .catch(err => {
    console.error('Error during loading module: ' + err)
    callback()
  })

but when i write this don't work

const test = '/Users/hubert_i/Emodyz/launcher-ezgames.eu/modules/test/index.js'
import(test)
  .then((m) => {
    console.log(m.name)
  })
  .catch(err => {
    console.error('Error during loading module: ' + err)
    callback()
  })

[ooflorent]

Webpack performs a static analyse at build time. It doesn't try to infer variables which that import(test) could be anything, hence the failure. It is also the case for import(path+"a.js").

If you need truly dynamic imports, you have to restrict it to a known path:

import("./locales/" + locale + ".js")

In the above example, webpack will create a chunk for each JS file in locale/.

[leohubert]

I would like to load module located in %appdata% in windows or Application Support on macOS how i can do that ?

[akash1210]

@MrDarkSkil I needed to do something similar. Please explain how you solved it. I want to read some configs present in application.conf in individual boxes.

[mattb290]

Would this also work for loading a remote module (over http(s)). I currently am trying to load modules located on a remove server (owned by me). When I import them locally it works fine:

loadJs = ( url, name ) => {
  return new Promise( resolve => {
    import(`/test/${name}`)
    .then((module) => {
      resolve(module.default)
    })
  })
}

However when I try to import over http it fails (no request reaches the backend at all):

import(`http://localhost:3001/api/uicomponents/one/${name}`)

Error: Unhandled Rejection (Error): Cannot find module 'http://localhost:3001/api/uicomponents/one/[name].js'.

[jeremy-coleman]

Also noteworthy, The behavior is different for named and default exports , which isnt only limited to webpack. You can export as both using ‘export { mymodule as default, mymodule}’

what @mattb290 said would be a useful addition now that modules are natively supported in browsers with <script type="module"> and people are going to release/load them all over the internet

any progress?

[x5engine]

This isn't dynamic import if we can load dynamically files depending on our variables otherwise why would I even use this I could just import all the files at the top!!

Seriously @ooflorent ?

[ooflorent]

@meteorplus you can import files dynamically. You only need a static prefix.

why would I even use this I could just import all the files at the top!!

Because it will reduce the main bundle size.

[muradm]

@ooflorent, what if I don't want to reduce bundle size, but load another webpack packed bundle with all dependencies (even with duplicate dependencies) from absolute path?