process is not defined

[traed]

When trying to import any of the exported functions (e.g. import { create } from 'jsondiffpatch') the app crashes with the message:

ReferenceError: process is not defined
    at node_modules/chalk/index.js (http://localhost:3001/node_modules/.vite/jsondiffpatch.js?v=3a1733f2:2664:31)
    at __require (http://localhost:3001/node_modules/.vite/chunk-OZKD6XBJ.js?v=3a1733f2:9:44)
    at http://localhost:3001/node_modules/.vite/jsondiffpatch.js?v=3a1733f2:2825:31

App is built using Vite and svelte.

[lominming]

Checked chalk index file and realized that process is being called to see whether we are in terminal window, etc.

Added the process as a global variable in Vite options. Probably not the best idea according to https://vitejs.dev/config/#define but it works for now.

Add the lines to your svelte.config.js file and restart your server.

  kit: {
    ...
    vite: {
      ...
      define: {
        process: {}, //fix chalk error which is used by jsondiffpatch
      },
    },
  },

[countnazgul]

@lominming thanks for that. It's working very well when in dev mode. When try and build the project for production then im getting Unexpected token in XXX/node_modules/jsondiffpatch/dist/jsondiffpatch.esm.js

Any idea how to build it in this case?

[iota-pi]

Since I don't need to support windows terminal, this is my work-around using patch-package:

patches/jsondiffpatch++chalk+2.4.2.patch

diff --git a/node_modules/jsondiffpatch/node_modules/chalk/index.js b/node_modules/jsondiffpatch/node_modules/chalk/index.js
index 1cc5fa8..c9a2dc1 100644
--- a/node_modules/jsondiffpatch/node_modules/chalk/index.js
+++ b/node_modules/jsondiffpatch/node_modules/chalk/index.js
@@ -5,7 +5,7 @@ const stdoutColor = require('supports-color').stdout;
 
 const template = require('./templates.js');
 
-const isSimpleWindowsTerm = process.platform === 'win32' && !(process.env.TERM || '').toLowerCase().startsWith('xterm');
+const isSimpleWindowsTerm = false;
 
 // `supportsColor.level` → `ansiStyles.color[name]` mapping
 const levelMapping = ['ansi', 'ansi', 'ansi256', 'ansi16m'];

[alexm]

FWIW, I added this to vue.config.js (as mentioned in https://stackoverflow.com/a/41359607) and it works:

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        process: {},
      }),
    ],
  },
  // ...
}

However, I think that upgrading chalk dependency would be better. AFAICT, later major versions of chalk do not use process.

[ierehon1905]

For anyone still struggling with this. Changing the node resolutions options for chalk helped me to avoid global variable pollution as it turned out other libraries act differently if process is present. So in your package.json (I took the latest version) add:

{
  "resolutions": {
    "jsondiffpatch/chalk": "5.0.1"
  }
}

Note that it works in yarn. In order to use this in npm you should use similar structure called overrides

[dankobg]

Checked chalk index file and realized that process is being called to see whether we are in terminal window, etc.

Added the process as a global variable in Vite options. Probably not the best idea according to https://vitejs.dev/config/#define but it works for now.

Add the lines to your svelte.config.js file and restart your server.

  kit: {
    ...
    vite: {
      ...
      define: {
        process: {}, //fix chalk error which is used by jsondiffpatch
      },
    },
  },

Then nothing else works like environment variables for example in sveltekit.

[trongitnlu]

If we don't use console should remove chalk from package.json and remove all methods relate to console inside jsondiffpatch.

I forked and published jsondiffpatch-rc to npm which help fix this issue

[devmattrick]

@countnazgul

Sorry for the late response, but I also bumped into this issue and the fix ended up being to define everything as strings. I think Vite literally just inserts the string values, so you should do something like:

export default defineConfig({
  // ...
  define: {
    'process.platform': '"web"',
  },
})

It doesn't need to be web or anything, I don't think it matters. But you need to make sure the value is quoted like that since Vite will literally just insert the string as the value and not having a second pair of quotes will make it reference a variable web instead of a string "web". Hope this helps!

[neko-para]

I have tested @trongitnlu 's solution and that package does work. Meanwhile, it's ok to directly import the umd version like below

import { diff, patch, unpatch } from 'jsondiffpatch/dist/jsondiffpatch.umd'

For typescript, use js with dts to wrap it.

diff.js

export { diff, patch, unpatch } from 'jsondiffpatch/dist/jsondiffpatch.umd'

diff.d.ts

import type { Delta } from 'jsondiffpatch'

export const diff: (left: any, right: any) => Delta | undefined
export const patch: (left: any, delta: Delta) => any
export const unpatch: (right: any, delta: Delta) => any
export type Delta = Delta