ENOENT Error when importing node_modules from network drive

[Jonas-360ty]

Describe the bug

What's the problem?
When creating a vite project on a network drive, any import from a node modules (that is not a dependency of vite) will throw an "Error: ENOENT: no such file or directory" Error.
It happens with a minimal vite setup without another framework, as well as on a vite-react project

Here is the Error message:
Error: ENOENT: no such file or directory, open '/192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing/node_modules/react/index.js' at Object.openSync (fs.js:476:3) at Object.readFileSync (fs.js:377:35) at optimizeDeps (C:\Users\360ty\AppData\Roaming\nvm\v14.16.1\node_modules\vite\dist\node\chunks\dep-36bf480c.js:71704:42) at processTicksAndRejections (internal/process/task_queues.js:93:5) at async runOptimize (C:\Users\360ty\AppData\Roaming\nvm\v14.16.1\node_modules\vite\dist\node\chunks\dep-36bf480c.js:75494:48) at async Server.httpServer.listen (C:\Users\360ty\AppData\Roaming\nvm\v14.16.1\node_modules\vite\dist\node\chunks\dep-36bf480c.js:75510:21)

Reproduction

1. Connect to any network drive.
2. create a vite project on the network drive ( npm init vite@latest <project-name> )
3. run npm i to install dependencies
4. install any node module that is not part of vite (e.g: react)
5. import anything from the module to your main file.
6. try running "vite" in the terminal
7. the error will now occur

now try doing the same thing on a local disk and it'll work just fine

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 564.13 MB / 7.91 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 93.0.4577.82
    Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    vite: ^2.5.4 => 2.5.10

Used Package Manager

npm

Logs

vite:config bundled config file loaded in 2049ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   configFile: 'W:/Github/three-tools/three-testing/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     server: { fs: [Object] }
  vite:config   },
  vite:config   root: 'W:/Github/three-tools/three-testing',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: 'W:\\Github\\three-tools\\three-testing\\public',
  vite:config   cacheDir: 'W:\\Github\\three-tools\\three-testing\\node_modules\\.vite',
  vite:config   command: 'serve',
  vite:config   mode: 'development',
  vite:config   isProduction: false,
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: { esbuildOptions: { keepNames: undefined } }
  vite:config } +12ms
  vite:deps Crawling dependencies using entries:
  vite:deps   W:/Github/three-tools/three-testing/index.html +0ms
  vite:resolve 1ms   /src/main.tsx -> W:/Github/three-tools/three-testing/src/main.tsx +0ms
  vite:resolve 19ms  react -> /192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing/node_modules/react/index.js +24ms
  vite:resolve 14ms  react-dom -> /192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing/node_modules/react-dom/index.js +16ms
  vite:resolve 3ms   ./App -> W:/Github/three-tools/three-testing/src/App.tsx +6ms
  vite:deps Scan completed in 147ms: {
  react: '/192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing/node_modules/react/index.js',
  'react-dom': '/192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing/node_modules/react-dom/index.js'
} +122ms

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 https://github.com/vuejs/vue-next 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.

[PwrSrg]

SAME issue here, so I can CONFIRM this.

As you can see, it happens with a BRAND NEW Vite install, per the basic 'intro' install instructions:

You can also see that it is even happening when the network drive is MAPPED to a drive letter.

[wilberforce]

I'm getting the same issue. What is occuring is that the hostname is getting prepended to the path of the depency rather than the drive letter.

instead of:

W:/Github/three-tools/three-testing

output is:
/192.168.19.11/Ausgabe_Files/Github/three-tools/three-testing

this is what is generating the code:

vite/packages/vite/src/node/optimizer/index.ts

Lines 236 to 253 in b582581

	// esbuild generates nested directory output with lowest common ancestor base
	// this is unpredictable and makes it difficult to analyze entry / output
	// mapping. So what we do here is:
	// 1. flatten all ids to eliminate slash
	// 2. in the plugin, read the entry ourselves as virtual files to retain the
	// path.
	const flatIdDeps: Record<string, string> = {}
	const idToExports: Record<string, ExportsData> = {}
	const flatIdToExports: Record<string, ExportsData> = {}
	const { plugins = [], ...esbuildOptions } =
	config.optimizeDeps?.esbuildOptions ?? {}
	await init
	for (const id in deps) {
	const flatId = flattenId(id)
	const filePath = (flatIdDeps[flatId] = deps[id])
	const entryContent = fs.readFileSync(filePath, 'utf-8')

The issue could be coming from the result of this regex:

vite/packages/vite/src/node/utils.ts

Lines 34 to 35 in b582581

	export const flattenId = (id: string): string =>
	id.replace(/(\s*>\s*)/g, '__').replace(/[\/\.]/g, '_')

[rhewy]

I can confirm the same prepended behavior and possible trigger.

Project creation

1. Open VSCode
2. Open Folder
3. New Folder
4. Open terminal (the dot below is really important)
   1. npm init vite@latest .
      1. demo
      2. vanilla
      3. vanilla
   2. npm install ol@latest

Then in main.js add:

import {Map, View} from './node_modules/ol'; // trigger the error

Then in build

BOOM!

Possible Trigger

In my case when node_modules\ol\layer\BaseVector.js trys to import rbush (line 20) things start to blow up:

import Layer from './Layer.js';
import RBush from 'rbush';
import { assign } from '../obj.js';

So esbuild (I think) tries to look for rbush. Interestingly, the dir rbush is in node_modules

Serve does not throw the error

I think serve uses rollup and might do the traditional node_modules walk up the directory tree then find rbush

Many modules do get transformed

Some non-vitejs file are transformed from the ol package, however, when ol says it needs rbush and rbush says it needs quickselect things go of the rails. Compare the path to the ones in Mapped drive paths

✓ 157 modules transformed.
[vite:load-fallback] Could not load /home.fs.bcit.ca/Dev1/xxxxxxxxx/var/gist/7132/wksp_web/test_vite_06/node_modules/rbush/index.js (imported by node_modules\ol\layer\BaseVector.js): ENOENT: no such file or directory, open 'Z:\home.fs.bcit.ca\Dev1\xxxxxxxxx\var\gist\7132\wksp_web\test_vite_06\node_modules\rbush\index.js'

Mapped drive paths

publicDir: 'Z:\var\gist\7132\wksp_web\test_vite_06\public'
Z:\var\gist\7132\wksp_web\test_vite_06
Z:\var\gist\7132\wksp_web\test_vite_06\node_modules
Z:\var\gist\7132\wksp_web\test_vite_06\node_modules\rbush\index.js

I hope this helps.

[Deji69]

Also been facing this issue for ages before finally figuring out the cause. Was trying to use Vite with Inertia for Laravel and receiving errors like the following:

dep:@inertiajs_inertia-vue3:1:23: ERROR: Could not resolve "./C:/Users/Deji/Cloud/WebDev/Project/www/icarush/node_modules/.pnpm/@[email protected]_91b43248bdff72beadf7eb88a4aefff2/node_modules/@inertiajs/inertia-vue3/dist/index.js"

Turns out it was due to the fact I had set up the project under U:/WebDev/Project/www/icarush with U:\ being mapped to C:/Users/Deji/Cloud/. Vite must have been expanding the mapping or something and getting confused on translating the paths. Running vite directly under the non-mapped C:\ path works around the issue.

[lovey25]

Same issue here, Help~

[Barresider]

Same issue here, Help~

You have to enable the preserveSymlinks option inside the vite config. For react vite it should look like this:

export default defineConfig({
  plugins: [react()],
  resolve: {
    preserveSymlinks: true
  }
})

[CharithaDhananjaya]

Same issue here, Help~

You have to enable the preserveSymlinks option inside the vite config. For react vite it should look like this:

export default defineConfig({
  plugins: [react()],
  resolve: {
    preserveSymlinks: true
  }
})

This works with me on vite, vue3, superb.

[patak-dev]

I think using resolve { preserveSymlinks: true } here is ok to support this use case. We also recently did some changes to how preserve links false work, so worth trying it out again. Closing this issue as the workaround seems good enough for the folks involved in this thread.