Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[vite:plugin-legacy] Polyfills fail to load when using <base href... /> #18154

Open
7 tasks done
pongells opened this issue Sep 20, 2024 · 1 comment
Open
7 tasks done

[vite:plugin-legacy] Polyfills fail to load when using <base href... /> #18154

pongells opened this issue Sep 20, 2024 · 1 comment
Labels
pending triage

Comments

@pongells
Copy link

Describe the bug

Polyfills are attached to index.html as first thing in <head>, this means they are loaded before <base href.. /> is set.

In my case this results in:

  <head>
    <script type="module" crossorigin src="./assets/polyfills-BFgdcrnO.js"></script>

    <base href="/" />
    <meta charset="utf-8" />
   ....

which is wrong.

Reproduction

https://github.com/pongells/vite-legacy-repro

Steps to reproduce

Checkout repo then:

npm install
npm run build
npm run preview

Go to:

http://localhost:4173/about/me

see polyfills not being loaded.

Summary:

  • Add a <base href="/" /> to your index.html file
  • Use base: "" in vite.config.ts
  • Navigate to a subroute /a/b
  • Set the legacy plugin to generate polyfills.js

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 8.78 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.n/bin/node
    Yarn: 4.4.1 - /opt/homebrew/bin/yarn
    npm: 8.18.0 - /opt/homebrew/bin/npm
    pnpm: 7.33.6 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.59
    Safari: 17.6
  npmPackages:
    @vitejs/plugin-legacy: ^5.4.2 => 5.4.2 
    @vitejs/plugin-react: 4.3.1 => 4.3.1 
    @vitejs/plugin-react-swc: 3.7.0 => 3.7.0 
    rollup: 4.22.0 => 4.22.0 
    vite: 5.4.6 => 5.4.6

Used Package Manager

yarn

Logs

No response

Validations
@pongells
Copy link
Author

Very very hacky workaround with a custom plugin:

 {
      name: "reorder-base-script",
      transformIndexHtml(html) {
        return html.replace(
          /(<head>)([\s\S]*?)(<script type="module" crossorigin src="\.\/assets\/polyfills[^"]+"><\/script>)([\s\S]*?)(<base href="[^"]+" \/>)/,
          (match, headOpen, headContent, scriptTag, rest, baseTag) => {
            return `${headOpen}\n    ${baseTag}\n    ${headContent.trim()}\n    ${scriptTag}`;
          },
        );
      },
      apply: "build",
      enforce: "post",
    },

probably can be simplified a bit..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pongells