question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

await import('@priv' + var); a.k.a Dynamic Third-party Namespaced Module Loading

See original GitHub issue

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

What is the current behavior?
Here the question on StackOverflow. Sadly, no one can give me any response since one month.

Until now, I had no issue because loading something all 3rd party modules (or bundle) were explicitly defined in my package.json and explicitly loaded in my code with full string value.

Like this :

    import Bundle from '@company/bundle';
    // ...

But now, my goal is to install and load those modules dynamically. I’ve already do the ‘install’ part, but I need to achieve this:

    (async () => {
        const something = ['/bundle']; // here for example but getted from a config file
        for (const bundleName of something) {
            const Bundle = await import(`@company${bundleName}`)
            Bundle.doStuff();
        }
    })();

The current behavior is that webpack replace the import part with a webpackMissingModule function that throw an error Cannot find module ".".

If the current behavior is a bug, please provide the steps to reproduce. For example with Angular (npm i @angular/core), which has a namespace like my modules ; build and run this with a basic typescript/webpack configuration :

    (async () => {
        const something = ['/core'];
        for (const bundleName of something) {
            const angular = await import(`@angular${bundleName}`)
            console.log(angular.Component);
        }
    })();

If you want a repo or a gist, tell me ❤️

What is the expected behavior?
I expect that my module is pre built and loaded when I ask for it even if it’s a 3rd party one.

If this is a feature request, what is motivation or use case for changing the behavior?
Bring the dynamic import to everything and not only local sources.

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

  • Webpack 3.8.1
  • Node 9.2.1
  • Yarn 1.3.2
  • Typecript next
  • awesome-typescript-loader latest
  • OSX 10.12.6
  • Chrome 63.0.3239.132 64 bits

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:11
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
lsagetlethiascommented, Apr 25, 2021

@JonathanWilbur Check out the plugin I made back then. It may need to be updated for Webpack 5 but it did the job perfectly for me.

1reaction
TheLarkInncommented, Jan 25, 2018

Perhaps since this is something we have a strong intent to implement for after webpack 4, I should create a separate issue and “spec” the behavior of this feature itself, and the internal requirements.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dynamic Third-party Namespaced Module Loading with Yarn ...
I have an agnostic application that can serve any private side developed project in a sandboxed container. Until now, I had no issue...
Read more >
How to Dynamically Import ECMAScript Modules
const module = await import(path);. It returns a promise and starts an asynchronous task to load the module. If the module was loaded...
Read more >
Using ES modules in Node.js - LogRocket Blog
With ES modules, modules are defined with the use of the import and export keywords instead of the require() function in CommonJS.
Read more >
API - ESBuild
Define; Format; Loader; Minify; Platform; Sourcemap; Target ... echo 'module.exports = "test"' | esbuild --format=esm... var ... call-import-namespace
Read more >
import - JavaScript - MDN Web Docs - Mozilla
To load modules in non-module contexts, use the dynamic import syntax instead. ... Namespace import: import * as name from "module-name"; ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found