[bug] Uncaught (in promise) ReferenceError: process is not defined

[Callan Bi]

Hi there, I encountered a bug when using prosemirror-dev-tools in Electron renderer process like this:

 const prosemirrorDevTools = await import('prosemirror-dev-tools');

It seems like jsondiffpatch introduced chalk, and chalkÏ involved the process variable.

prosemirror-dev-tools Version

3.1.0

Bug Log:

index.js:8 Uncaught (in promise) ReferenceError: process is not defined
    at node_modules/jsondiffpatch/node_modules/chalk/index.js (index.js:8)
    at __require2 (chunk-FH3PLF5R.js?v=51694e53:48)
    at json-diff-main.js:1
node_modules/jsondiffpatch/node_modules/chalk/index.js @ index.js:8
__require2 @ chunk-FH3PLF5R.js?v=51694e53:48
(anonymous) @ json-diff-main.js:1
Promise.then (async)
EditorStateContainer2 @ editor.js:357
applyDevTools @ index.js:25
(anonymous) @ editor.ts:47
async function (async)
(anonymous) @ editor.ts:46
(anonymous) @ index.ts:144
(anonymous) @ index.ts:144
async function (async)
(anonymous) @ index.ts:78
(anonymous) @ editor.ts:88
create @ editor.ts:88
(anonymous) @ Editor.tsx:28
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
scheduleRefresh @ react-dom.development.js:24428
renderer.scheduleRefresh @ react_devtools_backend.js:6005
(anonymous) @ @react-refresh:306
performReactRefresh @ @react-refresh:295
setTimeout (async)
(anonymous) @ @react-refresh:705
(anonymous) @ MilkdownEditor.tsx:19
setTimeout (async)
(anonymous) @ MilkdownEditor.tsx:19

Code that reproduces the issue:

import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, rootCtx } from '@milkdown/core';
import { clipboard } from '@milkdown/plugin-clipboard';
import { cursor } from '@milkdown/plugin-cursor';
import { diagram } from '@milkdown/plugin-diagram';
import { emoji } from '@milkdown/plugin-emoji';
import { history } from '@milkdown/plugin-history';
import { indent } from '@milkdown/plugin-indent';
import { listener, listenerCtx } from '@milkdown/plugin-listener';
import { math } from '@milkdown/plugin-math';
import { menu } from '@milkdown/plugin-menu';
import { prism } from '@milkdown/plugin-prism';
import { slash } from '@milkdown/plugin-slash';
import { tooltip } from '@milkdown/plugin-tooltip';
import { upload } from '@milkdown/plugin-upload';
import { gfm } from '@milkdown/preset-gfm';
import { nordLight } from '@milkdown/theme-nord';

import { codeSandBox } from './codeSandBox';
import { menuConfig } from './menuConfig';

import 'katex/dist/katex.min.css';

export const createEditor = (
  root: HTMLElement | null,
  defaultValue: string,
  readOnly: boolean | undefined,
  setEditorReady: (ready: boolean) => void,
  isDarkMode: boolean,
  onChange?: (markdown: string) => void,
) => {
  const editor = Editor.make()
    .config((ctx) => {
      ctx.set(rootCtx, root);
      ctx.set(defaultValueCtx, defaultValue);
      ctx.update(editorViewOptionsCtx, (prev) => ({ ...prev, editable: () => !readOnly }));
      if (onChange) {
        ctx
          .get(listenerCtx)
          .markdownUpdated((_, markdown) => {
            onChange(markdown);
          })
          .mounted(async (ctx) => {
            setEditorReady(true);
            if (import.meta.env.DEV) {
              const view = ctx.get(editorViewCtx);
              const prosemirrorDevTools = await import('prosemirror-dev-tools');
              prosemirrorDevTools.default(view);
            }
          });
      }
    })
    .use(nordLight)
    .use(gfm)
    .use(codeSandBox)
    .use(listener)
    .use(clipboard)
    .use(history)
    .use(cursor)
    .use(prism)
    .use(diagram)
    .use(tooltip)
    .use(math)
    .use(emoji)
    .use(indent)
    .use(upload)
    .use(slash);

  if (!readOnly) {
    editor.use(
      menu({
        config: menuConfig,
      }),
    );
  }

  return editor;
};

[eta-orionis]

The issue is known in jsondiffpatch: benjamine/jsondiffpatch#315
Temporary solution: define the process.platform variable in vite.config.js or vue.config.js, as suggested here:
benjamine/jsondiffpatch#315 (comment)