[2.8.5] Invalid script being added to html

[IanVS]

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 #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]

I am following it 😊

[poyoho]

hi @IanVS

The index.html inline css will request the module script to load css, but I don't know why it load all the html.

if (node.tag === 'style' && node.children.length) {
  addInlineModule(node, 'css')
}

in mine PR is only get the style node children 🥲

[poyoho]

oh your iframe.html request can't access the vite internal params

https://github.com/eirslett/storybook-builder-vite/blob/upgrade-vite-2.8.5/packages/storybook-builder-vite/code-generator-plugin.ts#L58-L59

[IanVS]

Thanks for investigating, @poyoho ! I'm sorry, but I don't understand what the problem is, or what we should do to fix it. Could you please explain a little more? Thanks!

[poyoho]

my mean is why http://localhost:61751/iframe.html?html-proxy&index=0.css always return the html strings and no process by vite.

[IanVS]

This has been working fine for us up until now... It's the way that we can create a virutal entry point, since there is no real index.html in our case.

[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 👻