scripts with a src attribute that's not a known extension aren't recognized as js

Describe the bug

I am writing a vite plugin for Imba and it works great. However, I cannot use <script type="module" src="/src/main.imba"></script> in the index.html.

The browser complains about

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

Note that other imports work fine

Reproduction

https://stackblitz.com/edit/vitejs-vite-nxtcgv?file=vite.config.js,index.html,main.imba&terminal=dev

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Max
    Memory: 331.89 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.11.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Chrome Canary: 107.0.5275.0
    Safari: 15.5

Used Package Manager

npm

Logs

Click to expand!

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

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

[jonaskuske]

It would be nice if we could read the Sec-Fetch-Dest header as part of isJSRequest and apply transforms if it is set to script, but of course Safari doesn’t support it: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest

Edit: the webkit bug for the implementation was fixed earlier this year and it ships in the Safari nightly builds, according to bugzilla: https://bugs.webkit.org/show_bug.cgi?id=204744. Also, Vite already reads sec-fetch-dest in the indexHtml middleware for the spa fallback

@patak-dev, what do you think?

[jonaskuske]

This code is guarding the transform:

if (
  isJSRequest(url) ||
  isImportRequest(url) ||
  isCSSRequest(url) ||
  isHTMLProxy(url)
) {
// transform request, call plugins, ...
}

Since isJSRequest is not customizable, it returns false for .imba files. However, you can take advantage of the second condition and mark the request as an import by adding the ?import query param:

<script type="module" src="./main.imba?import"></script>

With this it works without any additional config! (besides the .imba file transform)

And as per https://github.com/vitejs/vite/pull/3828#issuecomment-875403352, maybe suggest adding .imba to the known JS type extensions?