Vite removes external module from index.html #3533

hatchette · 2021-05-25T06:54:40Z

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

Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Provide a description in this issue that describes the bug.
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.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

The text was updated successfully, but these errors were encountered:

hatchette · 2021-05-25T06:57:12Z

Problem seems to be in:

vite/packages/vite/src/node/plugins/html.ts

Line 143 in 496e26e

const isExcludedUrl = (url: string) =>

I reckon we need a way of manually forcing externalUrl for certain relative urls.

ygj6 · 2021-06-08T07:53:21Z

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:

vite/packages/vite/src/node/plugins/asset.ts

Lines 132 to 147 in 144b92c

 export function checkPublicFile( 

 url: string, 

 { publicDir }: ResolvedConfig 

 ): string | undefined { 

 // note if the file is in /public, the resolver would have returned it 

 // as-is so it's not going to be a fully resolved path. 

 if (!publicDir || !url.startsWith('/')) { 

 return 

 } 

 const publicFile = path.join(publicDir, cleanUrl(url)) 

 if (fs.existsSync(publicFile)) { 

 return publicFile 

 } else { 

 return 

 } 

 }

bluwy · 2022-04-30T14:28:54Z

Took a look at this one today. Seems to be tricky to fix. The place where we're removing the script tag is here.

vite/packages/vite/src/node/plugins/html.ts

Line 295 in a30a548

shouldRemove = true

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 · 2022-05-10T14:31:51Z

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

dabuside · 2022-11-17T03:18:41Z

@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 · 2023-06-21T20:12:01Z

Is there any updates on this issue?

sgerke-1L · 2024-02-09T09:44:00Z

This feature would be much appreciated!

b2whats · 2024-05-04T23:28:18Z

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 · 2024-05-25T14:38:24Z

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">

Jayleaf · 2024-08-20T15:11:18Z

...so what's the workaround? nothing i try works, and I can't build my project whatsoever because of this.

leonheess · 2024-08-20T15:28:09Z

@Jayleaf the workaround tag was added erroneously by @bluwy, there is no workaround. We are using unix sed to cut all public references out of the index.html before the build and then add them back afterward in our build pipeline. It's ridiculous but we tried raising a PR (#11854), we are gold sponsors of both Vue and Vite and offered to pay any amount to get this bug fixed. No one cares.

Jayleaf · 2024-08-20T15:41:57Z

@Jayleaf the workaround tag was added erroneously by @bluwy, there is no workaround. We are using unix sed to cut all public references out of the index.html before build and then add them back afterwards in our build pipeline. Its ridiculous but we tried raising a PR (#11854), we are gold sponsors of both Vue and Vite and offered to pay any amount to get this bug fixed. No one cares.

@leonheess yeah that's pretty ridiculous. Thank you for linking the PR. This is definitely more than "nice to have" lol.

mobsense · 2024-09-05T02:36:35Z

The workaround for us is:

Yea, pretty ugly.

    let link = document.createElement('link')
    link.rel = 'stylesheet'
    link.type = 'text/css'
    link.href =  '/file.css'
    document.head.appendChild(link)

hatchette added the pending triage label May 25, 2021

bluwy added the has workaround label Mar 9, 2022

bluwy added p2-edge-case Bug, but has workaround or limited in scope (priority) and removed pending triage has workaround labels Apr 30, 2022

bseib mentioned this issue May 6, 2022

An external img should not generate an import statement #8047

Closed

7 tasks

poyoho mentioned this issue May 10, 2022

fix: call warning for asset what it is not exist and import by js #8100

Closed

9 tasks

bluwy added feat: html has workaround p2-nice-to-have Not breaking anything but nice to have (priority) and removed p2-edge-case Bug, but has workaround or limited in scope (priority) labels Dec 29, 2022

This was referenced Dec 29, 2022

feat(html)!: support more asset sources #11138

Open

do not want to allow absolute css URLs to be a css module #5906

Closed

leonheess mentioned this issue May 13, 2023

fix: exclude external dependencies from html rewriting #11854

Open

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite removes external module from index.html #3533

Vite removes external module from index.html #3533

hatchette commented May 25, 2021 •

edited

Loading

hatchette commented May 25, 2021

ygj6 commented Jun 8, 2021 •

edited

Loading

bluwy commented Apr 30, 2022

poyoho commented May 10, 2022 •

edited

Loading

dabuside commented Nov 17, 2022 •

edited

Loading

alo-id commented Jun 21, 2023

sgerke-1L commented Feb 9, 2024

b2whats commented May 4, 2024 •

edited

Loading

lukemovement commented May 25, 2024 •

edited

Loading

Jayleaf commented Aug 20, 2024

leonheess commented Aug 20, 2024 •

edited

Loading

Jayleaf commented Aug 20, 2024

mobsense commented Sep 5, 2024

Vite removes external module from index.html #3533

Vite removes external module from index.html #3533

Comments

hatchette commented May 25, 2021 • edited Loading

Describe the bug

Reproduction

System Info

Before submitting the issue, please make sure you do the following

hatchette commented May 25, 2021

ygj6 commented Jun 8, 2021 • edited Loading

bluwy commented Apr 30, 2022

poyoho commented May 10, 2022 • edited Loading

dabuside commented Nov 17, 2022 • edited Loading

alo-id commented Jun 21, 2023

sgerke-1L commented Feb 9, 2024

b2whats commented May 4, 2024 • edited Loading

lukemovement commented May 25, 2024 • edited Loading

Jayleaf commented Aug 20, 2024

leonheess commented Aug 20, 2024 • edited Loading

Jayleaf commented Aug 20, 2024

mobsense commented Sep 5, 2024

hatchette commented May 25, 2021 •

edited

Loading

ygj6 commented Jun 8, 2021 •

edited

Loading

poyoho commented May 10, 2022 •

edited

Loading

dabuside commented Nov 17, 2022 •

edited

Loading

b2whats commented May 4, 2024 •

edited

Loading

lukemovement commented May 25, 2024 •

edited

Loading

leonheess commented Aug 20, 2024 •

edited

Loading