[2.8.5] Invalid script being added to html

Describe the bug

I updated my project to vite 2.8.5, and found that my storybook using storybook-builder-vite started to fail. I now see this in my browser console:

iframe.html:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
iframe.html:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

And I see that two new scripts have been added to my root html that is served to the browser:

<script type="module" src="/iframe.html?html-proxy&index=0.css"></script>

// ... and a bit later on...

<script type="module" src="/iframe.html?html-proxy&index=1.css"></script>

These are served by express with text/html, which causes the error.

I did a git bisect, and traced the start of the error to https://github.com/vitejs/vite/pull/7052.

In the reproduction below (make sure you’re on the upgrade-vite-2.8.5 branch), run yarn install, then cd examples/react and yarn storybook. When the browser opens, you’ll see the console errors and an ugly block of text at the top of the page with No Preview in it.

Reproduction

https://github.com/eirslett/storybook-builder-vite/tree/upgrade-vite-2.8.5

System Info

System:
    OS: macOS 12.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.02 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.4.0 - ~/.nvm/versions/node/v16.4.0/bin/node
    Yarn: 3.1.1 - ~/.yarn/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v16.4.0/bin/npm
  Browsers:
    Brave Browser: 98.1.35.103
    Firefox: 97.0.1
    Safari: 15.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• 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.
• 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/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[poyoho]

😊 Good morning.

I know how to resolve this problem.

@IanVS you can add this code in the packages/storybook-builder-vite/index.ts

import { parse as parseUrl, URLSearchParams } from 'url'

function parseRequest(id: string): Record<string, string> | null {
  const { search } = parseUrl(id)
  if (!search) {
    return null
  }
  return Object.fromEntries(new URLSearchParams(search.slice(1)))
}


function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
  return async (req, res, next) => {
    if (!req.url.match(/^\/iframe.html($|\?)/)) {
      next();
      return;
    }

    const query = parseRequest(req.url)!
    
    if (query['html-proxy'] !== undefined) {
      next();
      return;
    }

    const indexHtml = fs.readFileSync(path.resolve(__dirname, '..', 'input', 'iframe.html'), 'utf-8');
    const generated = await transformIframeHtml(indexHtml, options);
    const transformed = await server.transformIndexHtml('/iframe.html', generated);
    res.setHeader('Content-Type', 'text/html');
    res.status(200).send(transformed);
  };
}

I test it will work 👻

[poyoho]

I am following it 😊