Aliases break JSON imports

[amh4r]

Describe the bug

When importing a JSON file using an alias, the app doesn't load and the following error shows in the browser console:

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

In other words, if you have the @ alias declared in vite.config.js:

resolve: {
  alias: {
    "@": "./src",
  },
},

And then import a JSON file using the alias:

import config from "@/config.json";

The error will happen.

This also happens when the aliased import is indirect. For example, if myFile.js imports config.json using a relative path but another file imports myFile.js using an alias.

Reproduction

https://github.com/goodoldneon/vite-alias-json-bug-repro

Steps to reproduce

1. npm run dev
2. Change import to import config from "@/anotherFile.js" in src/App.jsx
3. Look at the page in the browser

System Info

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.72 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 105.0.3
    Safari: 16.0
  npmPackages:
    @vitejs/plugin-react: ^2.2.0 => 2.2.0
    vite: ^3.2.0 => 3.2.0

Used Package Manager

npm

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

[sapphi-red]

alias is a simple replace. So you need to change resolve.alias from

	'@': './src'

to

	'@': path.resolve(__dirname, './src')

.
https://vitejs.dev/config/shared-options.html#resolve-alias:~:text=When%20aliasing%20to%20file%20system%20paths%2C%20always%20use%20absolute%20paths.%20Relative%20alias%20values%20will%20be%20used%20as%2Dis%20and%20will%20not%20be%20resolved%20into%20file%20system%20paths.

[amh4r]

I missed that in the docs! Thank you for pointing it out -- it works now