npm run build errors: [webpack-cli] Error: Cannot find module 'monaco-languageclient/vscode-compatibility'

[aukeroorda]

Hi - I just followed the steps at https://github.com/TypeFox/monaco-languageclient#development-environments and am running into the following error:

[webpack-cli] Failed to load '/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'monaco-languageclient/vscode-compatibility'
Require stack:
- /Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/bootstrap.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/bin/cli.js
- /Users/auke/monaco-languageclient/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.<anonymous> (/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js:31:31)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at WebpackCLI.tryRequireThenImport (/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js:244:16) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/bootstrap.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/bin/cli.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack/bin/webpack.js'
  ]
}
npm ERR! Lifecycle script `webpack:build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: example-client
npm ERR!   at location: /Users/auke/monaco-languageclient/packages/examples/client

Full log

> git clone https://github.com/TypeFox/monaco-languageclient.git
Cloning into 'monaco-languageclient'...
remote: Enumerating objects: 2237, done.
remote: Counting objects: 100% (928/928), done.
remote: Compressing objects: 100% (372/372), done.
remote: Total 2237 (delta 565), reused 861 (delta 526), pack-reused 1309
Receiving objects: 100% (2237/2237), 1.31 MiB | 6.89 MiB/s, done.
Resolving deltas: 100% (1407/1407), done.
~                                                     14:15:22
> cd monaco-languageclient
~/monaco-languageclient main                          14:15:35
> ls
CHANGELOG.md      index.html        scripts
CONTRIBUTING.md   package-lock.json tsconfig.json
License.txt       package.json      vite.config.ts
README.md         packages
~/monaco-languageclient main                          14:15:35
> npm i
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'normalize-url@7.0.3',
npm WARN EBADENGINE   required: { node: '>=12.20' },
npm WARN EBADENGINE   current: { node: 'v12.13.0', npm: '8.5.5' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'vscode-jsonrpc@8.0.1',
npm WARN EBADENGINE   required: { node: '>=14.0.0' },
npm WARN EBADENGINE   current: { node: 'v12.13.0', npm: '8.5.5' }
npm WARN EBADENGINE }

added 315 packages, and audited 320 packages in 9s

34 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.5.5 -> 8.11.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.11.0
npm notice Run npm install -g npm@8.11.0 to update!
npm notice
~/monaco-languageclient main !1                   10s 14:15:59
> npm run build

> build
> npm run build-client && npm run build-example-node && npm run build-example-client && npm run build-example-browser


> build-client
> npm run build --workspace packages/client


> monaco-languageclient@1.0.1 build
> npm run clean && npm run compile && npm run build:amd


> monaco-languageclient@1.0.1 clean
> npx shx rm -fr lib tsconfig.tsbuildinfo


> monaco-languageclient@1.0.1 compile
> tsc


> monaco-languageclient@1.0.1 build:amd
> npm run clean:amd && tsc --outDir dist/amd --module amd --declarationDir dist/amd --declaration


> monaco-languageclient@1.0.1 clean:amd
> npx shx rm -fr dist


> build-example-node
> npm run build --workspace packages/examples/node


> build
> npm run clean && npm run compile


> clean
> npx shx rm -fr lib tsconfig.tsbuildinfo


> compile
> tsc -b .


> build-example-client
> npm run build --workspace packages/examples/client && npm run webpack:example-client-build


> build
> npm run clean && npm run compile && npm run copy:monacoworkers


> clean
> npx shx rm -fr dist tsconfig.tsbuildinfo


> compile
> tsc


> copy:monacoworkers
> shx mkdir -p dist && shx cp -r ../../../node_modules/monaco-editor-workers/dist/workers/editorWorker* ./dist


> webpack:example-client-build
> npm run webpack:build --workspace packages/examples/client


> webpack:build
> npm run webpack:clean && npx webpack && npm run webpack:copy:monacoworkers


> webpack:clean
> npx shx rm -fr webpack/dist

[webpack-cli] Failed to load '/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'monaco-languageclient/vscode-compatibility'
Require stack:
- /Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/bootstrap.js
- /Users/auke/monaco-languageclient/node_modules/webpack-cli/bin/cli.js
- /Users/auke/monaco-languageclient/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.resolve (internal/modules/cjs/helpers.js:80:19)
    at Object.<anonymous> (/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js:31:31)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at WebpackCLI.tryRequireThenImport (/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js:244:16) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/auke/monaco-languageclient/packages/examples/client/webpack.config.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/webpack-cli.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/lib/bootstrap.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack-cli/bin/cli.js',
    '/Users/auke/monaco-languageclient/node_modules/webpack/bin/webpack.js'
  ]
}
npm ERR! Lifecycle script `webpack:build` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: example-client
npm ERR!   at location: /Users/auke/monaco-languageclient/packages/examples/client
~/monaco-languageclient main !1                   22s 14:16:36
>

As you can see in the full log, npm i already gives two warnings, however I don't see how these are related to the error.

[CGNonofr]

Hi

Does it work with monaco-languageclient/lib/vscode-compatibility?

[kaisalmen]

@aukeroorda you run node.js version 12.13.0. @CGNonofr could it be that the exports in the package.json leads to problems older node versions? Then we must raise the min required version, but this is only a guess, currently.

The GH Actions and Gitpod builds run without errors, but they both use node latest LTS version (16.15.0):
https://github.com/TypeFox/monaco-languageclient/runs/6611793973?check_suite_focus=true

[CGNonofr]

The subpath export was added in node 12.7.0 (https://nodejs.org/api/packages.html#subpath-exports) So it's supposed to work 🤷

[kaisalmen]

I tried it locally with 12.21.0 (that is the latest version of 12 I was able to install with n on Ubuntu) and was not able to reproduce the problem.

But, we need to set the minimum required npm version, because we use workspaces, now vscode-jsonrpc@8.0.1 requires node 14+, so we should take this into account as well.

[CGNonofr]

It's not related to node but to webpack. with webpack4, it doesn't work, but the workaround is to register an alias:

resolve: {
  alias: {
    'monaco-languageclient/vscode-compatibility': require.resolve('monaco-languageclient/vscode-compatibility')
  }
}

[kaisalmen]

(that is the latest version of 12 I was able to install with n on Ubuntu)

@CGNonofr testing/reproducing this kind of problem becomes super easy with volta even if it wasn't related to node here.

[kaisalmen]

@aukeroorda with 2.0.0+ of the lib this problem is gone, because vscode-compatibility no longer exists. It is replaced by monaco-vscode-api. For older versions of monacp-languageclient the following workaround can be applied: #363 (comment)