vite
vite copied to clipboard
vitejs
Vite removes external module from index.html
Describe the bug
Vitejs will remove external module declared in index.html if module has relative path.
Reproduction
index.html
<script type="module" src="/external/my-lib.mjs"></script>
vite.config.js
build: {
rollupOptions: {
external: "/external/my-lib.mjs",
},
Note that in production /external/my-lib.mjs is reverse-proxy to different deployment.
Changing url to https://host/... works, but this is not what we want, because we simply don't know the hostname at build time (it's deployed to more than single host).
System Info
Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:
System:
OS: macOS 11.2.3
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 2.84 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.0 - /usr/local/bin/node
Yarn: 1.22.10 - ~/sandbox/dashboard/node_modules/.bin/yarn
npm: 6.14.11 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
Browsers:
Chrome: 90.0.4430.212
Firefox: 88.0.1
Safari: 14.0.3
npmPackages:
vite: ^2.1.0 => 2.1.5
Used package manager: npm
Before submitting the issue, please make sure you do the following
- [x] Read the Contributing Guidelines.
- [x] Read the docs.
- [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [x] Provide a description in this issue that describes the bug.
- [x] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
Problem seems to be in: https://github.com/vitejs/vite/blob/496e26e995e18e7dab9fbea03885952f792e15ce/packages/vite/src/node/plugins/html.ts#L143
I reckon we need a way of manually forcing externalUrl for certain relative urls.
Hi @hatchette , you can put your 'my-lib.mjs' in 'public' dir. And reference the js file like this:
<script type="module" src="/my-lib.mjs"></script>
Here is the code: https://github.com/vitejs/vite/blob/144b92c391cbb6ced33a860e8eed5665031f4d48/packages/vite/src/node/plugins/asset.ts#L132-L147
Took a look at this one today. Seems to be tricky to fix. The place where we're removing the script tag is here.
https://github.com/vitejs/vite/blob/a30a5489ccac56ec668546af840984367c356a38/packages/vite/src/node/plugins/html.ts#L295
This line naively remove the script tag regardless if it resolves to something. The issue is that to determine if the file is externalized, we have to do something like await this.resolve(url).isExternal, but since this block of code operates in traverseHtml and is sync only, we can't run the async resolve to determine this.
Either we need @vue/compiler-core to support this, or we use a different strategy to ignore it.
@hatchette It seems to same with https://github.com/vitejs/vite/issues/7160, even no config config.rollupOptions.external it will call warning for this case So can I close this issues, because it is fix?
@hatchette It seems to same with #7160, even no config
config.rollupOptions.externalit will call warning for this case So can I close this issues, because it is fix?
no.
in this example you provided before, vite build command still move external css file to javascript file, which is unacceptable. Most server only inject {cdn} varibale into index.html file.
We expected external javascript(css) link should be keep in html file.
As described in the issue title, Vite should not remove external module from index.html
expected output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="{{cdnHost}}/cdn/images/favicon.ico" />
----- this external css link should be here, not js file
<link
rel="stylesheet"
href="{{cdnHost}}/cdn/printjs/print.min.css"
type="text/css"
/>
<title></title>
<script type="module" crossorigin src="/assets/index.3692b83b.js"></script>
<link rel="stylesheet" href="/assets/index.06d14ce2.css">
</head>
<body>
index.html
<div id="app"></div>
<script src="{{cdnHost}}/cdn/fingerprint2/2.1.0/fingerprint2.js"></script>
<script src="{{cdnHost}}/cdn/socket.io/2.2.0/socket.io.js"></script>
<script src="{{cdnHost}}/cdn/printjs/print.min.js"></script>
</body>
</html>
One more case
// index.html
<script type="module">
import 'app'
</script>
// vite.config.js
...
rollupOptions: {
external: [/app/],
},
...
But, if i add code with side-effect in script
// index.html
<script type="module">
import 'app';
console.log()
</script>
script doesn't be delete
