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

haikyuu commented 2 years ago

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!

```shell 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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

haikyuu commented 2 years ago

Possibly related (thanks steve-py96 from discord):

https://github.com/vitejs/vite/pull/3828

jonaskuske commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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?

jonaskuske commented 2 years ago

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 commented 2 years ago

@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 commented 1 year ago

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.

vitejs / vite