build fails with import statement in 3.1.6

[mbokil]

Describe the bug

npm run build fails to complete with v3.1.6 giving me the error "[plugin externalize-deps] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json." I resolved the problem by downgrading to Vite 3.1.4.

Reproduction

https://stackblitz.com/edit/vitejs-vite-rssden

System Info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.03 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.20.0 - ~/.nvm/versions/node/v14.20.0/bin/node
    npm: 6.14.17 - ~/.nvm/versions/node/v14.20.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^3.1.2 => 3.1.2
    vite: ^3.1.6 => 3.1.6

Used Package Manager

npm

Logs

ERROR] [plugin externalize-deps] Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.

node_modules/esbuild/lib/main.js:1327:27:
  1327 │         let result = await callback({
       ╵                            ^

at packageEntryFailure (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:34841:11)
at resolvePackageEntry (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:34838:5)
at tryNodeResolve (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:34584:20)
at file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63459:44
at requestCallbacks.on-resolve (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:1327:28)
at handleRequest (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:697:19)
at handleIncomingPacket (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:719:7)
at Socket.readFromStdout (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:647:7)
at Socket.emit (events.js:400:28)
at addChunk (internal/streams/readable.js:293:12)

This error came from the "onResolve" callback registered here:

node_modules/esbuild/lib/main.js:1251:20:
  1251 │       let promise = setup({
       ╵                     ^

at setup (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63456:27)
at handlePlugins (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:1251:21)
at buildOrServeImpl (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:942:5)
at Object.buildOrServe (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:750:5)
at /Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:2085:17
at new Promise (<anonymous>)
at Object.build (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:2084:14)
at build (/Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/esbuild/lib/main.js:1931:51)
at bundleConfigFile (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63423:26)

The plugin "externalize-deps" was triggered by this import

vite.config.js:3:15:
  3 │ import fs from 'fs'

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.

[jeff-wishnie]

This could be related:

Since 3.1.5 vite has failed when using standard node packages in vite.config.ts (same failure on 3.1.6 and 3.2.0-beta.0)--seems to be mishandling modules after transpilation?

This vite.config.ts (snippet...)

import { defineConfig, loadEnv } from 'vite';
import { fileURLToPath, URL } from 'url';

const projectRoot = path.dirname(fileURLToPath(import.meta.url));
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, projectRoot);
  return { ... }
});

Fails with the following when vite, vite dev or vite build are run:

 ERROR  failed to load config from /home/jwishnie/template_project/frontend-apps/main-app/vite.config.ts                                                          11:09:55


ERROR  error when starting dev server:                                                                                                                           11:09:55
TypeError: (0 , import_url.fileURLToPath) is not a function
   at Object.<anonymous> (/home/jwishnie/template_project/frontend-apps/main-app/vite.config.ts:45:76)
   at Module._compile (node:internal/modules/cjs/loader:1149:14)
   at _require.extensions.<computed> [as .js] (file:///home/jwishnie/template_project/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63524:24)
   at Module.load (node:internal/modules/cjs/loader:1027:32)
   at Module._load (node:internal/modules/cjs/loader:868:12)
   at Module.require (node:internal/modules/cjs/loader:1051:19)
   at require (node:internal/modules/cjs/helpers:103:18)
   at loadConfigFromBundledFile (file:///home/jwishnie/template_project/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63532:21)
   at loadConfigFromFile (file:///home/jwishnie/template_project/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63400:34)
   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[mbokil]

Yeah I filed the bug since I thought it was fix for 3.1.5 but npm run build fails for me. Downgrading to 3.1.4 was my workaround.

[haoqunjiang]

You've accidentally installed a "fs": "*", dev dependency in your project. Removing that fixed the issue.

[mbokil]

No your analysis of the bug is incorrect. The fs import is needed by our business. Note that I had to include a minimal test case for the reproduction since I can't add certs to the reproduction. This code below works in 3.1.4 but fails for anything after that. We use certs for HTTPS for Okta security.

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import fs from 'fs'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./cert/key.pem'),
      cert: fs.readFileSync('./cert/cert.pem')
    }
  },
  plugins: [
                vue({})
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

[haoqunjiang]

I mean the "fs": "*" line in package.json: https://stackblitz.com/edit/vitejs-vite-rssden?file=package.json%3AL13
You don't need to install packages for Node.js builtin modules.
What you end up getting was this package: https://www.npmjs.com/package/fs

[mbokil]

No you are incorrect. With Vite it is in needed or the build fails with an error. Just note this code works in 3.1.4 just fine but since 3.1.5 it fails. In other words regression error in Vite. I commented out fs and the below error is thrown. We have a workaround with Vite 3.1.4 so I am good. I will just wait until more bug reports come in.

failed to load config from /Users/markbokil/dev/clinic-frx-delivery-log-ui/vite.config.js
error when starting dev server:
ReferenceError: fs is not defined
    at Object.<anonymous> (/Users/markbokil/dev/clinic-frx-delivery-log-ui/vite.config.js:76:12)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object._require.extensions.<computed> [as .js] (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:63514:24)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at loadConfigFromBundledFile (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:63522:21)
    at loadConfigFromFile (file:///Users/markbokil/dev/clinic-frx-delivery-log-ui/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:63381:34)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

[haoqunjiang]

I mean, import fs from 'fs' in vite.config.js is good, but "fs": "*" in package.json is bad…

[haoqunjiang]

https://stackblitz.com/edit/vitejs-vite-vgmevm?file=package.json&file=vite.config.js

[cywhale]

https://stackblitz.com/edit/vitejs-vite-vgmevm?file=package.json&file=vite.config.js

The same problem+1 , but I found it got solved if I just remove fs from package.json and install vite 3.1.5+ version. It works well.

[mbokil]

Yes that is what I did too but it is also why I still see it as a bug. If a developer wishes to use a specific version of fs they should be able to. It never conflicted in versions up to 3.1.4. So now I have lost functionality. I hope they restore it so I can upgrade Vite eventually.