Development mode transpiles correctly while build doesn't.

[MathiasDeWeerdt]

Describe the bug

I am using the following dependency: https://github.com/bitcoinjs/bip39

This loads bip39 and works perfectly when running yarn dev(I did have to use some work arounds to get it running), when building it breaks.

I'd like to understand why this works under development but not when I build the entire project. It seems to be related to commonjs because bip39 uses require. This is perfectly transpiled when using development but breaks when build.

Reproduction

Miminal reproduction: https://github.com/jimbertools/vite-bip39
This loads bip39 and works perfectly when running yarn dev(I did have to use some work arounds to get it running), when building it breaks.

System Info

╰─❯ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers


npx: installed 1 in 0.904s

  System:
    OS: Linux 5.13 Pop!_OS 20.04 LTS
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 23.09 GB / 30.98 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 6.14.15 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0

Used Package Manager

yarn

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

[Mahdi-Esbati]

Similarly, I have encountered the same problem.
In my case, the package that is causing this issue is: dagre which is a legacy commonJS package and is no longer maintained.

My app works perfectly in development mode but breaks in production when it is build by rollup with the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Graph')
    at vendor.dec94905.js:503

This issue only appears in version 2.6.3 and up. It does not appear in version 2.6.2.
I believe this is related to this pull request: #5173

[ygj6]

This may be an problem of @rollup/plugin-commonjs instead of vite. FYI, I created a minimal replica rollup project using bip39, it also built successfully but failed to run in the browser. https://stackblitz.com/edit/web-platform-pxjx8j?file=src/main.js

The reason for the inconsistency between dev and build is that in dev, vite uses esbuild to bundle the CJS to ESM, while in build, vite uses rollup & @rollup/plugin-commonjs

[agileago]

+1

[MichaelFroeschen]

This may be an problem of @rollup/plugin-commonjs instead of vite. FYI, I created a minimal replica rollup project using bip39, it also built successfully but failed to run in the browser. https://stackblitz.com/edit/web-platform-pxjx8j?file=src/main.js

The reason for the inconsistency between dev and build is that in dev, vite uses esbuild to bundle the CJS to ESM, while in build, vite uses rollup & @rollup/plugin-commonjs

Has an issue at @rollup/plugin-commonjs already been created? I do not have the insight to create a sufficient issue (and unfortunately not enough time to get into it) otherwise i would create it.

[FPG-Alan]

Similarly, I have encountered the same problem. In my case, the package that is causing this issue is: dagre which is a legacy commonJS package and is no longer maintained.

My app works perfectly in development mode but breaks in production when it is build by rollup with the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'Graph')
    at vendor.dec94905.js:503

This issue only appears in version 2.6.3 and up. It does not appear in version 2.6.2. I believe this is related to this pull request: #5173

Rollup commonjs plugin set ignoreTryCatch default as true at version 21.0.0(use safe default value for ignoreTryCatch), and vite upgrade commonjs plugin to this version at it's 2.6.3 version(#5173), maybe this is the cause of the problem.

Try to set ignoreTryCatch to false in vite.config and the problem maybe solved:

defineConfig({
  ...
  build: {
    commonjsOptions: {
      ignoreTryCatch: false,
    }
  }
  ...
})

---

Some libraries, including the one I use, may use require to import other libraries and wrap them in try catch statements, commonjs plugin under version 21.0.0 will translate this code to ESM by default but the new version will not.

[MichaelFroeschen]

Thanks, That actually fixed it for me 😄

[alexamy]

Thanks, @FPG-Alan, it works for resolving problem with dagre package.

[ranyefet]

I had the same issue and this flag fixed it.

[plutda]

it works for dagre "Cannot read property 'Graph' of undefined" problem

[bluwy]

Vite 3 now uses esbuild for builds, and I can confirm the repro works now with Vite 3.0.0-beta.2