-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
Add support for ES modules in the externals configuration option #8895
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Any update for this? I would be interested in helping on this task but would like to have an approval beforehand. |
It is open source, so you can send a PR 👍 |
Are there any news about this? |
Work In progress in webpack 5 So far there is a There will also be a |
Has this been addressed in the current release? |
From the blogpost:
So from the looks of it, you can do: import("https://www.example.com/module.mjs").then(module => { /* (...) */ }); But you can't yet do: import { /* (...) */ } from "https://www.example.com/module.mjs"; This seems to be consistent with what @sokra reported earlier. |
Try to set |
Your comment echoes the following from the blogpost:
Out of curiosity I decided to give it a try, and here are my findings: 1.
This happens even when using 2. 3. 4.
package.json: {
"name": "webpack-5-test",
"version": "1.0.0",
"private": true,
"dependencies": {
"webpack": "5.1.3",
"webpack-cli": "4.1.0",
"webpack-dev-server": "3.11.0"
}
} webpack.config.js module.exports = {
externalsPresets: {
web: false,
webAsync: true
}
}; src/index.js // static
import { add, VALUE_1, VALUE_2 } from "http://localhost:8000/mod.mjs";
console.log("static:", add(VALUE_1, VALUE_2));
// dynamic
import("http://localhost:8000/mod.mjs")
.then(({ add, VALUE_1, VALUE_2 }) => console.log("dynamic:", add(VALUE_1, VALUE_2))); dist/mod.mjs export const VALUE_1 = 1;
export const VALUE_2 = 2;
export function add(param1, param2) {
return param1 + param2;
} dist/index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack 5 test</title>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html> |
And outstanding question that I have is whether I tried using the following without success: Attempt 1: Generates a non ES module output. module.exports = {
externalsPresets: {
web: false,
webAsync: true
},
entry: {
mod: "./src/mod.mjs"
},
experiments: {
outputModule: true
}
}; Attempt 2: Fails with a module.exports = {
externalsPresets: {
web: false,
webAsync: true
},
entry: {
mod: "./src/mod.mjs"
},
experiments: {
outputModule: true
},
output: {
// this is supposed to be set by `experiments.outputModule = true`
iife: false,
libraryTarget: "module",
scriptType: "module",
module: true,
},
}; Edit:
@evilebottnawi For both attempt 1 and attempt 2, I have just used the code from this comment. The only difference is that the file |
@marcogrcr Can you provide example of second attempt? |
The error is caused because libraryTarget: module is not implemented yet and generated weird code. You can't export esm yet. But when omitting this option you should be able to consume esm as external |
Is there a plan to implement |
Yes, we have issue for this, on top our roadmap, after fixing critical regressions (after stable v5 release) |
@alexander-akait is this the relevant issue to watch? #2933 |
And yes and no |
@sokra is it still an issue? |
@vankop this should still be an issue. I didn't see any clear solution on how to consume external ESM packages in this issue thread. |
This feature supported in |
@vankop I don't think |
hm.. yes to do something like => in code import('lodash').then(() => {}) in bundle import('https://c.dn/lodash'/* it will look another way, but do the same */).then(() => {}) you need: const path = require("path")
module.exports = [
{
externals: {
lodash: 'script https://code.lodash.com/lodash-2.2.4.min.js'
},
}
]; |
It is just Current issue about having |
Feature request
What is the expected behavior?
Webpack currently supports the concept of externals but it only allows the forms:
root
,commonjs
,commonjs2
, andamd
.This is a problem if my source code depends on a third-party library that is hosted on a CDN (in ES module format).
For example, the following does not currently work with webpack:
What is the motivation or use case for adding/changing the behavior?
Now that most browsers natively support loading modules via
import
statements in module scripts, it should be possible to leverage this feature while still bundling with webpack.Webpack already has the notion of external dependencies, it should be possible to do the same with external module dependencies.
How should this be implemented in your opinion?
External imports could be placed at the top of each chunk, and their exported variables could be renamed as necessary to ensure no collisions with existing chunk code.
Are you willing to work on this yourself?
I'm willing to help, but cannot commit to full implementation. I looked into whether it would be possible to implement this via a plugin, and it didn't seem like it's currently possible.
The text was updated successfully, but these errors were encountered: