[graphiql] examples/graphql-vite dev command doesn't work

[AndKiel]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

  VITE v6.3.5  ready in 870 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-graphql@1.7.1_graphql@16.11.0_monaco-editor@0.52.2_prettier@3.6.0/node_modules/monaco-graphql/esm/graphql.worker.js?worker

    node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:3:26:
      3 │ import GraphQLWorker from "monaco-graphql/esm/graphql.worker.js?worker";
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-editor@0.52.2/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?worker

    node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:2:25:
      2 │ import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker";
        ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-editor@0.52.2/node_modules/monaco-editor/esm/vs/language/json/json.worker.js?worker

    node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:1:23:
      1 │ import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker.js?worker";
        ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/esbuild@0.25.5/node_modules/esbuild/lib/main.js:1463
  let error = new Error(text);
              ^

Error: Build failed with 3 errors:
node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:1:23: ERROR: Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-editor@0.52.2/node_modules/monaco-editor/esm/vs/language/json/json.worker.js?worker
node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:2:25: ERROR: Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-editor@0.52.2/node_modules/monaco-editor/esm/vs/editor/editor.worker.js?worker
node_modules/.pnpm/@graphiql+react@0.35.0_graphql@16.11.0_react-dom@19.1.0_react@19.1.0__react@19.1.0_use-_3492b0e3ed1a9fbbf2f5ae5f6cad1844/node_modules/@graphiql/react/dist/setup-workers/vite.js:3:26: ERROR: Cannot read file: /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/monaco-graphql@1.7.1_graphql@16.11.0_monaco-editor@0.52.2_prettier@3.6.0/node_modules/monaco-graphql/esm/graphql.worker.js?worker
    at failureErrorWithLog (/Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/esbuild@0.25.5/node_modules/esbuild/lib/main.js:1463:15)
    at /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/esbuild@0.25.5/node_modules/esbuild/lib/main.js:924:25
    at /Users/andkiel/graphiql/examples/graphiql-vite/node_modules/.pnpm/esbuild@0.25.5/node_modules/esbuild/lib/main.js:1341:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v22.15.1

Expected Behavior

The dev command does not error, and the example app launches without issues.

Steps To Reproduce

git clone git@github.com:graphql/graphiql.git
cd graphiql/examples/graphiql-vite
pnpm install
pnpm dev

Environment

• GraphiQL Version: latest (v5)

Anything else?

Building the example and starting it from built assets works without issues:

pnpm build
pnpm start

I have a similar issue in my app where dev command ends up with:

3:26:21 PM [vite] Internal server error: Cannot find package '/my-project/node_modules/.pnpm/@graphiql+react@0.35.0_@emotion+is-prop-valid@1.3.1_@types+node@24.0.3_@types+react-dom_4a3c179265db08ae2258135de168b995/node_modules/monaco-editor/index.js' imported from /my-project/node_modules/.pnpm/@graphiql+react@0.35.0_@emotion+is-prop-valid@1.3.1_@types+node@24.0.3_@types+react-dom_4a3c179265db08ae2258135de168b995/node_modules/@graphiql/react/dist/constants.js

but it also doesn't work with built code.

[dimaMachina]

we don't use pnpm, but yarn

do:

yarn
yarn build
yarn workspace example-graphiql-vite dev

[eMerzh]

@dimaMachina , i did somewhat similar to @AndKiel ... i "extract" the vite example repo, yarn install then yarn dev, and it didn't work ...

my assumption was that the directory looks like what a "repo" with vite could look like, not specially requiring the exact same tooling than the monorepo & suff

[AndKiel]

@eMerzh, the example starts working with yarn when the entire monorepo is built from the top directory, as in @dimaMachina's snippet. I thought that the example was a stand-alone project. Well, the example clearly works so I was mistaken. Doesn't help me with my project, though.

[dimaMachina]

thank you, I was able to reproduce on fresh project, I will take a look at fix !

[AndKiel]

@dimaMachina, I've created a minimal reproduction of the issue I'm encountering - https://github.com/AndKiel/graphiql-issue-4038 - I hope it helps.

[dimaMachina]

the example and migration guide were updated using vite-plugin-monaco-editor plugin

[bengry]

the example and migration guide were updated using vite-plugin-monaco-editor plugin

You can also use the vite-plugin-monaco-editor-esm fork to avoid the cjs workaround. It's the same in all regards apart from being ESM only.

[AndKiel]

Still doesn't work for me. I've updated https://github.com/AndKiel/graphiql-issue-4038 reproduction repository.

EDIT: Although vite example is completely fine now.