[Build] Don't work production build with @apidevtools/json-schema-ref-parser, but development mode it's work

[yura007rt]

Describe the bug

Hello! I ran into a build problem in product mode when adding a library @apidevtools/json-schema-ref-parser. I add plugins @esbuild-plugins/node-modules-polyfill and @esbuild-plugins/node-globals-polyfill in vite.config for development mode it's help me, but it's dont work for production mode. I tried add rollup plugin with nodejs rollup-plugin-polyfill-node dependencies for production mode, but it's not help me.

my vite.config.ts and my start project

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import NodeModulesPolyfill from '@esbuild-plugins/node-modules-polyfill'
import NodeGlobalsPolyfill from '@esbuild-plugins/node-globals-polyfill'
import nodePolyfills from 'rollup-plugin-polyfill-node'

export default defineConfig(({command, mode}) => {
  return {
    plugins: [
      react(),
    ],
    optimizeDeps: {
      esbuildOptions: {
        plugins: [
          NodeModulesPolyfill(),
          NodeGlobalsPolyfill({
            buffer: true,
            process: true,
          }),
        ],
      },
    },
    build: {
      sourcemap: true,
      emptyOutDir: true,
      rollupOptions: {
        plugins: [
          nodePolyfills(),
        ],
      },
    },
    server: command === 'serve' ? {open: '/'} : undefined,
  }
})

Error:

Can you help me?

Reproduction

https://github.com/yura007rt/json-ref-parser-bug

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 7.25 GB / 15.92 GB
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.33)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

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

[bluwy]

It works in dev only because optimizeDeps is a dev only feature in Vite 2. Perhaps APIDevTools/json-schema-ref-parser#257 (comment) may fix it for you. (You could probably do the utils part only)

The core issue is that the package is using nodejs modules in the browser, which is causing issues

[aerialist7]

Hi @bluwy, thank you for your response. I've checked - it doesn't work :( (not utils part only nor full config)
We understand, that we need to configure build config only but we don't now how (of cause it's possible since it works in dev)

[aerialist7]

Also, I migrated from CJS to ESM manually and now it works.
https://github.com/aerialist7/json-schema-ref-parser/commit/948aecdf8cec02995a2b5e240f0c060fc5e7d29c

@bluwy, can we use some plugins to automatically convert CJS to ESM for production build?

[bluwy]

Interesting that ESM works. Vite already auto-convertes packages to ESM in prod builds. I'll check tomorrow with what's going on in json-schema-ref-parser

[bluwy]

Sorry I completely forgot about it 😅 I found a fix though:

# Shim util module
npm i -D util

Vite will auto pick this up without resolve.alias.

In index.html add:

<script>
  globalThis.global = globalThis;
  globalThis.process = { env: {} };
</script>

in body to shim global and process.env

---

There's 3 issues here:

1. util shim should not be needed. It's imported by @jsdevtools/ono but it has a browser field that should avoid it in the first place. Related issue: vite does not handle "browser" field in package.json properly, when using package 'tapable' #7576
2. global is used by call-me-maybe dep
3. process.env is used by util (ironically)

1 and 3 is related and should be resolved when that issue is resolved. I'm not sure why converting to ESM fixes it though.

[sudhanshug16]

FYI, this is still a bug, Vite picks up the @jsdevtools/ono's ESM version which doesn't work in the browser. I solved it by adding an alias in vite config:

    alias: {
      '@': path.resolve(__dirname, './src'),
      '@jsdevtools/ono': '@jsdevtools/ono/cjs/index.js',
    }```