[Monaco-graphql] Monaco-graphql fails to build with latest versions of Vite, monaco-editor and monaco-graphql.

[skalidindi]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

I get the following error when trying to run npm run build on the sample project provided below. It is a barebones skeleton React Vite starter app which imports monaco-editor and monaco-graphql in main.tsx and runs initializeMode. This was working in a previous version of monaco-editor 0.48.

Error:
error during build:
[vite]: Rollup failed to resolve import "monaco-editor/esm/vs/editor/contrib/hover/browser/hover" from "/Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/monaco-graphql/esm/full.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
at viteWarn (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:65876:17)
at onwarn (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/@vitejs/plugin-react-swc/index.mjs:203:9)
at onRollupWarning (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:65909:5)
at onwarn (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/vite/dist/node/chunks/dep-C1-ZB6nQ.js:65571:7)
at file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/rollup/dist/es/shared/node-entry.js:18514:13
at Object.logger [as onLog] (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/rollup/dist/es/shared/node-entry.js:20162:9)
at ModuleLoader.handleInvalidResolvedId (file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/rollup/dist/es/shared/node-entry.js:19104:26)
at file:///Users/skalidindi/oss/vite-monaco-editor-build-bug/node_modules/rollup/dist/es/shared/node-entry.js:19062:26

Repo: https://github.com/skalidindi/vite-monaco-editor-build-bug

Expected Behavior

I expect the error to not occur and the build to pass.

Steps To Reproduce

1. Clone provided repo
2. Run npm install
3. Run npm run build

Environment

• Monaco-Graphql Version:
• OS: MacOS
• Browser: Arc
• Bundler: Vite
• react Version: 18.3.1
• monaco-graphql Version: 1.5.2
• monaco-editor Version: 0.50.0
• Vite Version: 5.3.1

Anything else?

No response

[RoccoC]

This is also failing in my project, which uses Webpack, not Vite.

Looks like this is due to a recent change in monaco-editor-core where /vs/editor/contrib/hover/browser/hover was renamed to /vs/editor/contrib/hover/browser/hoverController: https://github.com/microsoft/vscode/pull/210219/files#diff-952bfc0bbfb137401f2692dfbf091b8cca1506a573b26242a0233b2845574b9d

I was able to work-around this by adding an alias to my webpack config:

const config = {
  // ...
  resolve: {
    alias: {
      'monaco-editor/esm/vs/editor/contrib/hover/browser/hover': 'monaco-editor/esm/vs/editor/contrib/hover/browser/hoverController',
    },
  },
};

I suspect that the monaco-editor-core hover/hoverController is an internal module and not intended for direct import by external packages, but I don't know enough about the monaco-editor ecosystem to know for sure. That said, I supose one way to address this would be to update the hover import in monaco-graphql to refer to the new file and to also update its peerDependency on monaco-editor to match. Happy to raise a PR if this is the right approach, but I'll leave that up to the maintainers. 🙂

[acao]

A PR would be welcome if you've tracked down a solution!

[ThomasLaSalmonie]

This workaround work only for monaco-editor >= "0.49.0" et monaco-editor < "0.52.0"

There is currently a lot of movements in renaming files directly in the vscode repo
This one is already in the monaco-editor: "0.52.0"
renaming and extract some code from hoverController => contentHoverController2
microsoft/vscode@e4843ae

And maybe in the next release of monaco-editor:
renaming contentHoverController2 => contentHoverController
microsoft/vscode@ef4eae3

Also I didn't dig deep into the code modification of each commit/release from vscode repo, but my use case of using monaco-graphql is working with those workarounds

[thomasJang]

Hi, I'm integrating monaco-graphql in an Electron + Vite app (with monaco-editor@0.52.2) and encountered a build failure due to a deep ESM import:

Rollup failed to resolve import "monaco-editor/esm/vs/editor/contrib/hover/browser/hover"

To work around the issue, I temporarily aliased it in vite.config like this:

resolve: {
  alias: {
    "monaco-editor/esm/vs/editor/contrib/hover/browser/hover":
      "monaco-editor/esm/vs/editor/contrib/hover/browser/contentHoverController2"
  }
}

However, this is just a workaround and fragile if Monaco changes again. Could monaco-graphql avoid such deep hardcoded imports or expose a safer integration point for bundlers like Vite?

Thanks again for your excellent work!