Production build error in codebases using jsondiffpatch package with Vite version above @4.0.2

[bpetii]

Describe the bug

I was trying to update Vite to the version of 4.1.1 in our company and I was facing an error saying:
Uncaught TypeError: Cannot read properties of undefined (reading 'close') from vendor.js file.

I knew it is coming from a node_modules deps, but I had no clue which package exactly and we got stuck. Finally I figured it out so I created a dummy project including that package: jsondiffpatch.

I downgraded vite to 4.1.1, 4.0.4, 4.0.3 - Failing
I downgraded vite to 4.0.2 and lower - Working

I feel there was a breaking change in releasing [email protected] and if I had to guess I would say it's the commonjs update.

Reproduction

https://github.com/bpetii/Vite-issue-reproduction

Steps to reproduce

• Run yarn or npm install
• Run server by yarn run server command
• Type localhost:3000 in a browser
• Open devtools and see the error in the console tab

System Info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 6.08 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.1.0 => 4.1.1

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

[fi3ework]

in 4.0.3 https://github.com/vitejs/vite/blob/v4.0.3/packages/vite/CHANGELOG.md, @rollup/plugin-commonjs is bumped to 24 from 23, the breaking change is rollup/plugins#1358. You may can fix this by turning build.commonjsOptions. defaultIsModuleExports to true

[bpetii]

@fi3ework I just tried out this option and no success unfortunately:/

[sapphi-red]

I tested this with rollup.
It seems this doesn't work from 23.0.5.
https://stackblitz.com/edit/rollup-template-t6mulq?file=src%2Fmain.js

The change is rollup/plugins#1363.

[bpetii]

@sapphi-red Nice one! Thank you:)

[justbearcause]

I've added a new plugin to vite.config.js to solve this problem:

      {
        // https://github.com/vitejs/vite/issues/11986
        // https://github.com/rollup/rollup/issues/4861
        name: 'my:jsondiffpatch',
        configResolved() {
          const cjsFile = require.resolve('jsondiffpatch');
          const cjsCode = fs.readFileSync(cjsFile, 'utf-8');
          const cjsModifiedCode = cjsCode.replace(
            `var chalk = _interopDefault(require('chalk'));`,
            'var chalk = null;',
          );
          fs.writeFileSync(cjsFile, cjsModifiedCode);

          const esmFile = file.replace(
            path.join('jsondiffpatch.cjs.js'),
            path.join('jsondiffpatch.esm.js'),
          );
          const esmCode = fs.readFileSync(esmFile, 'utf-8');
          const esmModifiedCode = esmCode.replace(
            `import chalk from 'chalk';`,
            'const chalk = null;',
          );
          fs.writeFileSync(esmFile, esmModifiedCode);
        },
      },

[sapphi-red]

I tested rollup/plugins#1455 and it worked.

[bpetii]

Beautiful! I hope Vite will release a new version including this new version of the rollup

[ragrag]

https://www.npmjs.com/package/jsondiffpatch-rc
this seems to have this issue fixed