vite build fails to resolve real file in 4.3

Describe the bug

I am using vite with react and @mui/material. When I run vite build, it encounters error during build (no such file or directory) on resolving C:\Users\sunghwan\source\repos\vite-project\node_modules\.pnpm\@mui+material@5.12.1_@emotion+react@11.10.6_@emotion+styled@11.10.6_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0\node_modules\@mui\material\BottomNavigationAction\bottomNavigationActionClasses.js.

What I found is the file is actually exists, but realpathSync.native fails because the length is 265 that is over MAX_PATH, 260.

PS C:\Users\sunghwan\source\repos\vite-project\node_modules\.pnpm\@mui+material@5.12.1_@emotion+react@11.10.6_@emotion+styled@11.10.6_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0\node_modules\@mui\material\BottomNavigationAction> dir


    디렉터리: C:\Users\sunghwan\source\repos\vite-project\node_modules\.pnpm\@mui+material@5.12.1_@emotion+react@11.10.6_@emotion+style
    d@11.10.6_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0\node_modules\@mui\material\BottomNavigationAction


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----      2022-12-28   오후 6:06           2162 BottomNavigationAction.d.ts
-a----      2022-12-28   오후 6:06           5373 BottomNavigationAction.js
-a----      2022-12-28   오후 6:06            693 bottomNavigationActionClasses.d.ts
-a----      2022-12-28   오후 6:06            457 bottomNavigationActionClasses.js
-a----      2022-12-28   오후 6:06            236 index.d.ts
-a----      2022-12-28   오후 6:06            192 index.js
-a----      2022-12-28   오후 6:06            132 package.json

Reproduction

https://github.com/sunghwan2789/repro-vite-4-3-build-fail

Steps to reproduce

pnpm create vite
pnpm add @mui/material @emotion/react @emotion/styled
# use mui components
pnpm build

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 4.85 GB / 31.35 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.3.1
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.48)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.0-beta.0 => 4.0.0-beta.0
    vite: ^4.3.0 => 4.3.0

Used Package Manager

pnpm

Logs

Click to expand!

  vite:config bundled config file loaded in 325.81ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:force-systemjs-wrap-complete',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     include: [ 'react' ],
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { onwarn: [Function: onwarn] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true },
  vite:config     cssMinify: true
  vite:config   },
  vite:config   esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined },
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [ 'react', 'react-dom' ],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   configFile: 'C:/Users/sunghwan/source/repos/vite-project/vite.config.ts',
  vite:config   configFileDependencies: [ 'C:/Users/sunghwan/source/repos/vite-project/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     optimizeDeps: { force: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'C:/Users/sunghwan/source/repos/vite-project',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: 'C:\\Users\\sunghwan\\source\\repos\\vite-project\\public',
  vite:config   cacheDir: 'C:/Users/sunghwan/source/repos/vite-project/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules],
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: 'C:/Users/sunghwan/source/repos/vite-project',
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  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   packageCache: Map(1) {
  vite:config     'fnpd_C:/Users/sunghwan/source/repos/vite-project' => {
  vite:config       dir: 'C:\\Users\\sunghwan\\source\\repos\\vite-project',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:watch-package-data',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:resolve',
  vite:config       'vite:html-inline-proxy',
  vite:config       'vite:css',
  vite:config       'vite:esbuild',
  vite:config       'vite:json',
  vite:config       'vite:wasm-helper',
  vite:config       'vite:worker',
  vite:config       'vite:asset',
  vite:config       'vite:wasm-fallback',
  vite:config       'vite:define',
  vite:config       'vite:css-post',
  vite:config       'vite:build-html',
  vite:config       'vite:worker-import-meta-url',
  vite:config       'vite:asset-import-meta-url',
  vite:config       'vite:force-systemjs-wrap-complete',
  vite:config       'commonjs',
  vite:config       'vite:data-uri',
  vite:config       'vite:worker-post',
  vite:config       'vite:dynamic-import-vars',
  vite:config       'vite:import-glob',
  vite:config       'vite:build-import-analysis',
  vite:config       'vite:esbuild-transpile',
  vite:config       'vite:terser',
  vite:config       'vite:load-fallback'
  vite:config     ],
  vite:config     rollupOptions: {},
  vite:config     getSortedPlugins: [Function: getSortedPlugins],
  vite:config     getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +13ms
vite v4.3.0 building for production...
  vite:esbuild 39.71ms tsconfck init C:/Users/sunghwan/source/repos/vite-project +0ms
✓ 36 modules transformed.
✓ built in 522ms
[commonjs--resolver] ENOENT: no such file or directory, realpath 'C:\Users\sunghwan\source\repos\vite-project\node_modules\.pnpm\@mui+material@5.12.1_@emotion+react@11.10.6_@emotion+styled@11.10.6_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0\node_modules\@mui\material\BottomNavigationAction\bottomNavigationActionClasses.js'
error during build:
Error: ENOENT: no such file or directory, realpath 'C:\Users\sunghwan\source\repos\vite-project\node_modules\.pnpm\@mui+material@5.12.1_@emotion+react@11.10.6_@emotion+styled@11.10.6_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0\node_modules\@mui\material\BottomNavigationAction\bottomNavigationActionClasses.js'
    at realpathSync.native (node:fs:2602:3)
    at getRealPath (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:23510:20)
    at tryResolveRealFile (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:23053:16)
    at tryResolveRealFileWithExtensions (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:23057:21)
    at tryCleanFsResolve (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:23011:24)
    at tryFsResolve (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:22981:17)
    at Object.resolveId (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/vite@4.3.0/node_modules/vite/dist/node/chunks/dep-33545781.js:22806:28)
    at file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/rollup@3.20.6/node_modules/rollup/dist/es/shared/node-entry.js:24407:40
    at async PluginDriver.hookFirstAndGetPlugin (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/rollup@3.20.6/node_modules/rollup/dist/es/shared/node-entry.js:24307:28)
    at async resolveId (file:///C:/Users/sunghwan/source/repos/vite-project/node_modules/.pnpm/rollup@3.20.6/node_modules/rollup/dist/es/shared/node-entry.js:23204:26)

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.

I confirmed that this is fixed in nodejs v16.18 nodejs/node#44536 nodejs/node#44886

We could start using realpathSync.native only for node 18+ only (or 16.8+?) in Windows. PR welcome, the code is here:

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

Line 561 in e7924d2

export let safeRealpathSync = isWindows

Maybe only using native when path is less than 255 characters on windows

That could also work. But this would still for node <16.8, no?

Yeah

Importing from node_modules in the entry file started to fail when upgrading from vite's 4.2.2 to 4.3.0 (4.3.1 also fails).
Same error on node.js 18.15.0 (in GitHub Actions ubuntu-latest) & locally on apple's M1 Pro w/ node.js 19.9.0
Example how to reproduce:

I haven't found a workaround, so downgrading to 4.2.2 is the only option to fix builds for now

// index.ts - javascript entry defined in index.html
import "./node_modules/@COMPANY_NAME/common-entry"

@o-alexandrov

I've encountered a similar issue to @o-alexandrov in dev mode on an Apple M1 mac. After upgrading from 4.2.x to 4.3.x the web worker files in my project are all returning a 404 response from the Vite server even though the transpiled path as viewed from the sources tab in browser devtools is correct.

@bluwy @patak-dev Based on my experience and from what @o-alexandrov is reporting I suspect this issue may run deeper than just Windows dev environments. I have attempted to replicate this issue on Stackblitz but so far am unable to get it to behave the same as my local environment.

Similar to @o-alexandrov, the only solution I have found to solve the issue is to downgrade Vite to 4.2.2.

@andrewcourtice

@andrewcourtice perhaps you can try patching this code to export let safeRealpathSync = fs.realpathSync to see if it fixes the issue? Maybe we need to have a hardcoded check for long paths in general.

@andrewcourtice

@andrewcourtice perhaps you can try patching this code to export let safeRealpathSync = fs.realpathSync to see if it fixes the issue? Maybe we need to have a hardcoded check for long paths in general.

@bluwy That didn't work unfortunately. I'll have a look around Vite's code for importing worker files and see what's changed between 4.2.x and 4.3.x and see if anything stands out.

The codebase I am on is a large monorepo using symlinked packages (via yarn workspaces). Maybe there is new behaviour with how Vite resolves packages in monorepos for worker files.

4.3 changes a lot for how files are resolved in general, so there could be many causes. I think it would be best if we track this in a new issue (and better if you can repro it!)

@bluwy

4.3 changes a lot for how files are resolved in general, so there could be many causes. I think it would be best if we track this in a new issue (and better if you can repro it!)

@bluwy I managed to reproduce the issue. It turns out that Vite wasn't resolving the file because it was expecting a file extension in the URL constructor despite Vite's default resolve.extensions value indicating otherwise.

For example, in a symlinked package this doesn't work:

const worker = new Worker(new URL('./worker', import.meta.url), {
    type: 'module',
});

But this does:

const worker = new Worker(new URL('./worker.ts', import.meta.url), {
    type: 'module',
});

I'll open a new issue for this particular case. It still only seems to be affecting workers in symlinked packages.

Thanks for your help :)

Navigation Menu

Repository navigation

vite build fails to resolve real file in 4.3 #12931

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

vite build fails to resolve real file in 4.3 #12931

Description

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

Activity

sunghwan2789 commented on Apr 21, 2023

patak-cat commented on Apr 21, 2023

Niputi commented on Apr 21, 2023

patak-cat commented on Apr 21, 2023

Niputi commented on Apr 21, 2023

o-alexandrov commented on Apr 24, 2023

andrewcourtice commented on May 4, 2023

bluwy commented on May 8, 2023

andrewcourtice commented on May 8, 2023

bluwy commented on May 9, 2023

andrewcourtice commented on May 10, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions