Vite removes external module from index.html

hatchette commented 3 years ago

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.

hatchette commented 3 years ago

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.

ygj6 commented 3 years ago

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

bluwy commented 2 years ago

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.

poyoho commented 2 years ago

@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?

dabuside commented 1 year ago

@hatchette It seems to same with #7160, even no config config.rollupOptions.external it 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>

alo-id commented 1 year ago

Is there any updates on this issue?

sgerke-1L commented 4 months ago

This feature would be much appreciated!

b2whats commented 2 months ago

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

lukemovement commented 1 month ago

These are also be removed from the <head> of my index.html file.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="//fonts.gstatic.com">

vitejs / vite