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

[haikyuu]

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.

[haikyuu]

Possibly related (thanks steve-py96 from discord):

• feat: add list of known js source extensions to config #3828

[jonaskuske]

Since the PRs fixing the linked issue aren't merged yet, you might still be able to fool Vite by appending a query param ending with the extension, like /src/main.imba?ext=.js so .endsWith('.js') returns true

[haikyuu]

Since the PRs fixing the linked issue aren't merged yet, you might still be able to fool Vite by appending a query param ending with the extension, like /src/main.imba?ext=.js so .endsWith('.js') returns true

Thanks @jonaskuske Now I get another error

html:/home/projects/vitejs-vite-ljh9bl/index.html:1:7: ERROR: No loader is configured for ".imba" files

repro: https://stackblitz.com/edit/vitejs-vite-ljh9bl?file=index.html

[jonaskuske]

Okay, remove the ?ext=.js and instead add this to your plugin:

{
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      if (req.url.endsWith('.imba')) {
        res.setHeader('Content-Type', 'application/javascript')
      }

      next()
    })
  }
}

[haikyuu]

@jonaskuske it works but the imba file isn't transformed. So I get this error

app.imba:3 
        
       Uncaught SyntaxError: Unexpected identifier (at app.imba:3:5)

[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 #3828 (comment), maybe suggest adding .imba to the known JS type extensions?

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

[haikyuu]

@patak-dev Do you have an update on this issue?
I'm leaning towards adding .imba manually in Vite like astro, svelte ...
I tried all other solutions including injectQuery but none worked so far.

We're approaching a release of Imba with Vite bundling backend and front-end code and this is one of the biggest pain points we have now. 🙃

Opened a PR for imba

[patak-dev]

Closing as the original issue was resolved by #10679. We still need to find a way to avoid a harcoded list of extensions, but there are other issues/PRs tracking that.