Failed to resolve path with alias and React createRoot

[MarioLegenda]

Describe the bug

I've been using Vite version 5.0.11 with path aliases and createRoot. In that version, it worked just fine but in 5.1.1, it fails because (I think) of using createRoot.

Reproduction

https://github.com/MarioLegenda/vite-bug

Steps to reproduce

Just run npm run dev and the site will crash with this image:

The reason why I think this is a Vite bug is because it works on v5.0.11 and not on v5.1.1. All other dependencies are the same. I only upgraded Vite.

It is a weird bug. The repo that I gave did reproduce the bug and it seems that createRoot is the problem here. If you comment the code that uses createRoot and comment out the code that uses ReactDOM.createRoot().render(), works just fine. But on a project that I'm working on and where the bug happened, if I move the component to another alias path, it works.

So for example, if the @root is the scr/ directory, it will fail but if I put it to src/app, it will work. Important to note that src/app is also aliased with @app so @app/MyComponent.tsx will work. Components that are not directly in @root will also work, like @root/somePath/MyComponent.tsx work fine.

System Info

All browsers

  System:
    OS: Linux 6.6 Pop!_OS 22.04 LTS
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
    Memory: 49.55 GB / 62.56 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.10.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 121.1.62.162
    Chrome: 121.0.6167.160
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.1.0 => 5.1.1

Used Package Manager

npm

Logs

Click to expand!

```shell

[email protected] dev
vite --debug < log.log

2024-02-13T18:07:59.474Z vite:config bundled config file loaded in 598.35ms
2024-02-13T18:07:59.482Z vite:config using resolved config: {
plugins: [
'vite:optimized-deps',
'vite:watch-package-data',
'vite:pre-alias',
'alias',
'vite:react-babel',
'vite:react-refresh',
'vite:modulepreload-polyfill',
'vite:resolve',
'vite:html-inline-proxy',
'vite:css',
'vite:esbuild',
'vite:json',
'vite:wasm-helper',
'vite:worker',
'vite:asset',
'vite:wasm-fallback',
'vite:define',
'vite:css-post',
'vite:worker-import-meta-url',
'vite:asset-import-meta-url',
'vite:dynamic-import-vars',
'vite:import-glob',
'vite:client-inject',
'vite:css-analysis',
'vite:import-analysis'
],
resolve: {
mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
conditions: [],
extensions: [
'.mjs', '.js',
'.mts', '.ts',
'.jsx', '.tsx',
'.json'
],
dedupe: [ 'react', 'react-dom' ],
preserveSymlinks: false,
alias: [ [Object], [Object], [Object] ]
},
build: {
target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
outDir: 'build',
assetsDir: 'assets',
assetsInlineLimit: 4096,
cssCodeSplit: true,
sourcemap: false,
rollupOptions: { onwarn: [Function: onwarn] },
minify: 'esbuild',
terserOptions: {},
write: true,
emptyOutDir: null,
copyPublicDir: true,
manifest: false,
lib: false,
ssr: false,
ssrManifest: false,
ssrEmitAssets: false,
reportCompressedSize: true,
chunkSizeWarningLimit: 500,
watch: null,
commonjsOptions: { include: [Array], extensions: [Array] },
dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
modulePreload: { polyfill: true },
cssMinify: true
},
optimizeDeps: {
holdUntilCrawlEnd: true,
force: undefined,
esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ]
},
server: {
preTransformRequests: true,
host: undefined,
sourcemapIgnoreList: [Function: isInNodeModules$1],
middlewareMode: false,
fs: {
strict: true,
allow: [Array],
deny: [Array],
cachedChecks: undefined
}
},
esbuild: { jsxDev: true, jsx: 'automatic', jsxImportSource: undefined },
configFile: '/home/mario/development/applications/vite-bug/vite.config.mjs',
configFileDependencies: [ '/home/mario/development/applications/vite-bug/vite.config.mjs' ],
inlineConfig: {
root: undefined,
base: undefined,
mode: undefined,
configFile: undefined,
logLevel: undefined,
clearScreen: undefined,
optimizeDeps: { force: undefined },
server: { host: undefined }
},
root: '/home/mario/development/applications/vite-bug',
base: '/',
rawBase: '/',
publicDir: '/home/mario/development/applications/vite-bug/public',
cacheDir: '/home/mario/development/applications/vite-bug/node_modules/.vite',
command: 'serve',
mode: 'development',
ssr: {
target: 'node',
optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
},
isWorker: false,
mainConfig: null,
isProduction: false,
css: { lightningcss: undefined },
preview: {
port: undefined,
strictPort: undefined,
host: undefined,
https: undefined,
open: undefined,
proxy: undefined,
cors: undefined,
headers: undefined
},
envDir: '/home/mario/development/applications/vite-bug',
env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
assetsInclude: [Function: assetsInclude],
logger: {
hasWarned: false,
info: [Function: info],
warn: [Function: warn],
warnOnce: [Function: warnOnce],
error: [Function: error],
clearScreen: [Function: clearScreen],
hasErrorLogged: [Function: hasErrorLogged]
},
packageCache: Map(1) {
'fnpd_/home/mario/development/applications/vite-bug' => {
dir: '/home/mario/development/applications/vite-bug',
data: [Object],
hasSideEffects: [Function: hasSideEffects],
webResolvedImports: {},
nodeResolvedImports: {},
setResolvedCache: [Function: setResolvedCache],
getResolvedCache: [Function: getResolvedCache]
},
set: [Function (anonymous)]
},
createResolver: [Function: createResolver],
worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
appType: 'spa',
experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
getSortedPlugins: [Function: getSortedPlugins],
getSortedPluginHooks: [Function: getSortedPluginHooks]
}
2024-02-13T18:07:59.499Z vite:deps Hash is consistent. Skipping. Use --force to override.

VITE v5.1.1 ready in 730 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
2024-02-13T18:07:59.510Z vite:hmr [file change] log.log
2024-02-13T18:07:59.510Z vite:hmr [no modules matched] log.log
2024-02-13T18:08:20.739Z vite:time 1.72ms /
2024-02-13T18:08:20.742Z vite:hmr [file change] log.log
2024-02-13T18:08:20.742Z vite:hmr [no modules matched] log.log
2024-02-13T18:08:20.750Z vite:html-fallback Rewriting GET / to /index.html
2024-02-13T18:08:20.773Z vite:time 24.53ms /index.html
2024-02-13T18:08:20.775Z vite:resolve 3.74ms /src/app/main.tsx -> /home/mario/development/applications/vite-bug/src/app/main.tsx
2024-02-13T18:08:20.779Z vite:load 3.03ms [fs] /src/app/main.tsx
2024-02-13T18:08:21.027Z vite:hmr [file change] log.log
2024-02-13T18:08:21.027Z vite:hmr [no modules matched] log.log
2024-02-13T18:08:21.028Z vite:resolve 0.31ms /@vite/client -> /home/mario/development/applications/vite-bug/node_modules/vite/dist/client/client.mjs
2024-02-13T18:08:21.029Z vite:load 0.03ms [plugin] /@react-refresh
2024-02-13T18:08:21.036Z vite:load 8.40ms [fs] /@vite/client
2024-02-13T18:08:21.041Z vite:import-analysis 1.32ms [0 imports rewritten] /@react-refresh
2024-02-13T18:08:21.042Z vite:transform 12.74ms /@react-refresh
2024-02-13T18:08:21.042Z vite:time 13.54ms /@react-refresh
2024-02-13T18:08:21.046Z vite:resolve 0.15ms @vite/env -> /home/mario/development/applications/vite-bug/node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:21.047Z vite:import-analysis 2.64ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs
2024-02-13T18:08:21.047Z vite:transform 3.26ms /@vite/client
2024-02-13T18:08:21.047Z vite:time 19.47ms /@vite/client
2024-02-13T18:08:21.050Z vite:load 3.24ms [fs] /node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:21.053Z vite:resolve 0.73ms react/jsx-dev-runtime -> /home/mario/development/applications/vite-bug/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:21.053Z vite:resolve 0.85ms react-dom/client -> /home/mario/development/applications/vite-bug/node_modules/.vite/deps/react-dom_client.js?v=c789925b
2024-02-13T18:08:21.053Z vite:resolve 0.54ms /home/mario/development/applications/vite-bug/src//App -> null
2024-02-13T18:08:21.053Z vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b needs interop
2024-02-13T18:08:21.057Z vite:resolve 5.18ms @root/App -> /home/mario/development/applications/vite-bug/src//App
2024-02-13T18:08:21.057Z vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=c789925b needs interop
2024-02-13T18:08:21.058Z vite:resolve 6.33ms @root/App -> /home/mario/development/applications/vite-bug/src/App
2024-02-13T18:08:21.058Z vite:optimize-deps load /home/mario/development/applications/vite-bug/node_modules/.vite/deps/react_jsx-dev-runtime.js
2024-02-13T18:08:21.058Z vite:optimize-deps load /home/mario/development/applications/vite-bug/node_modules/.vite/deps/react-dom_client.js
7:08:21 PM [vite] Internal server error: Failed to resolve import "@root/App" from "src/app/main.tsx". Does the file exist?
Plugin: vite:import-analysis
File: /home/mario/development/applications/vite-bug/src/app/main.tsx:1:16
1 | import { jsxDEV } from "react/jsx-dev-runtime";
2 | import App from "@root/App";
| ^
3 | import { createRoot } from "react-dom/client";
4 | const rootElement = document.getElementById("root");
at formatError (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50510:46)
at TransformContext.error (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50504:19)
at normalizeUrl (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65561:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65716:47
at async Promise.all (index 1)
at async TransformContext.transform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65637:13)
at async Object.transform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50819:30)
at async loadAndTransform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:53592:29)
2024-02-13T18:08:21.079Z vite:time 53.00ms /src/app/main.tsx
7:08:21 PM [vite] Pre-transform error: Failed to resolve import "@root/App" from "src/app/main.tsx". Does the file exist?
2024-02-13T18:08:21.080Z vite:import-analysis 0.06ms [no imports] node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:21.080Z vite:transform 0.48ms /node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:21.081Z vite:time 30.11ms /node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:21.083Z vite:hmr [file change] log.log
2024-02-13T18:08:21.083Z vite:hmr [no modules matched] log.log
2024-02-13T18:08:21.086Z vite:load 27.74ms [plugin] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:21.087Z vite:resolve 0.25ms ./chunk-4YP5LC2O.js -> /home/mario/development/applications/vite-bug/node_modules/.vite/deps/chunk-4YP5LC2O.js?v=c789925b
2024-02-13T18:08:21.088Z vite:optimize-deps load /home/mario/development/applications/vite-bug/node_modules/.vite/deps/chunk-4YP5LC2O.js
2024-02-13T18:08:21.088Z vite:import-analysis 1.19ms [1 imports rewritten] node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:21.088Z vite:transform 1.83ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:21.092Z vite:time 1.24ms /vite.svg
2024-02-13T18:08:21.093Z vite:load 34.49ms [plugin] /node_modules/.vite/deps/react-dom_client.js?v=c789925b
2024-02-13T18:08:21.106Z vite:import-analysis 6.39ms [1 imports rewritten] node_modules/.vite/deps/react-dom_client.js?v=c789925b
2024-02-13T18:08:21.106Z vite:transform 13.07ms /node_modules/.vite/deps/react-dom_client.js?v=c789925b
2024-02-13T18:08:21.117Z vite:load 28.94ms [plugin] /node_modules/.vite/deps/chunk-4YP5LC2O.js?v=c789925b
2024-02-13T18:08:21.117Z vite:import-analysis 0.60ms [no imports] node_modules/.vite/deps/chunk-4YP5LC2O.js?v=c789925b
2024-02-13T18:08:21.118Z vite:transform 0.93ms /node_modules/.vite/deps/chunk-4YP5LC2O.js?v=c789925b
2024-02-13T18:08:22.286Z vite:html-fallback Rewriting GET / to /index.html
2024-02-13T18:08:22.289Z vite:hmr [file change] log.log
2024-02-13T18:08:22.289Z vite:hmr [no modules matched] log.log
2024-02-13T18:08:22.293Z vite:time 7.61ms /index.html
2024-02-13T18:08:22.296Z vite:load 2.39ms [fs] /src/app/main.tsx
2024-02-13T18:08:22.307Z vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b needs interop
2024-02-13T18:08:22.308Z vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=c789925b needs interop
2024-02-13T18:08:22.308Z vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:22.308Z vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=c789925b
7:08:22 PM [vite] Pre-transform error: Failed to resolve import "@root/App" from "src/app/main.tsx". Does the file exist?
2024-02-13T18:08:22.310Z vite:cache [304] /@vite/client
2024-02-13T18:08:22.310Z vite:time 0.14ms /@vite/client
2024-02-13T18:08:22.311Z vite:cache [304] /@react-refresh
2024-02-13T18:08:22.311Z vite:time 0.12ms /@react-refresh
2024-02-13T18:08:22.314Z vite:load 4.36ms [fs] /src/app/main.tsx
2024-02-13T18:08:22.319Z vite:cache [304] /node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:22.319Z vite:time 0.15ms /node_modules/vite/dist/client/env.mjs
2024-02-13T18:08:22.321Z vite:import-analysis /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b needs interop
2024-02-13T18:08:22.322Z vite:import-analysis /node_modules/.vite/deps/react-dom_client.js?v=c789925b needs interop
2024-02-13T18:08:22.322Z vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=c789925b
2024-02-13T18:08:22.322Z vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=c789925b
7:08:22 PM [vite] Internal server error: Failed to resolve import "@root/App" from "src/app/main.tsx". Does the file exist?
Plugin: vite:import-analysis
File: /home/mario/development/applications/vite-bug/src/app/main.tsx:1:16
1 | import { jsxDEV } from "react/jsx-dev-runtime";
2 | import App from "@root/App";
| ^
3 | import { createRoot } from "react-dom/client";
4 | const rootElement = document.getElementById("root");
at formatError (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50510:46)
at TransformContext.error (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50504:19)
at normalizeUrl (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65561:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65716:47
at async Promise.all (index 1)
at async TransformContext.transform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:65637:13)
at async Object.transform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:50819:30)
at async loadAndTransform (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:53592:29)
at async viteTransformMiddleware (file:///home/mario/development/applications/vite-bug/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:63376:32)
2024-02-13T18:08:22.324Z vite:time 13.85ms /src/app/main.tsx
2024-02-13T18:08:22.330Z vite:time 0.29ms /vite.svg

</details>

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[hi-ogawa]

This might be a mostly same issue as #15858 where server.fs.cachedChecks is missing some path normalization. Could you try adding server.fs.cachedChecks: false (like suggested in #15858 (comment))?

Also your particular issue with src/ alias is probably because of double slash when aliasing @root/App --> .../src//App. So, I think you could remove trailing slash since it is likely redundant:

https://stackblitz.com/edit/github-qp2hbv?file=vite.config.mjs

  resolve: {
    alias: {
      // --
      // '@root': join(__dirname, 'src/'),
      // ++
      '@root': join(__dirname, 'src'),
    },
  }

[MarioLegenda]

Yes, I removed the slash and it fixed it. I also tried with server.fs.cachedChecks = false with a trailing slash and that works too. Note that server.fs.cachedChecks is not in the documentation.

Thank you very much.

P.S. Sorry for closing and opening the issue again. I pressed it by accident.