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.

Vite removes external module from index.html

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

ygj6commented, Jun 8, 2021

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

0reactions

dabusidecommented, Nov 17, 2022

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