Closed traed closed 1 year ago
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
},
},
},
@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?
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'];
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
.
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
Checked
chalk
index
file and realized thatprocess
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.
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
@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!
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
When trying to import any of the exported functions (e.g.
import { create } from 'jsondiffpatch'
) the app crashes with the message:App is built using Vite and svelte.