Webpack errors with peer dependency and PNPM

[alexkreidler]

I followed the instructions in the README and got these errors. While I fixed them, I want to record this information in case it is useful for anyone. I'll close the issue immediately though.

The first is relating to the monaco-editor peer dependency that wasn't in the package.json so I just installed it. But it was the wrong version, so I made sure to change the package.json to exactly "monaco-editor": "^0.30.0",. I tried using NPM instead of PNPM, same problems. I realized I had added a webpack resolve.alias for monaco-editor while debugging based on advice in a Github issue but that was causing the last problem. Voila it worked

In between all this I made a version of the demo app using Vite which was great once I added vite-plugin-monaco-editor, vite-plugin-top-level-await, and vite-plugin-wasm. The last two are useful for anyone trying to embed VegaFusion in a Vite app.

Long log output

root@vmi1092129:~/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web# pnpm run build

> [email protected] build /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web
> webpack --config webpack.config.js

assets by status 6.63 MiB [cached] 1 asset
assets by path *.js 18.2 MiB
  assets by chunk 3.13 MiB (id hint: vendors)
    asset vendors-node_modules_pnpm_vegafusion-wasm_1_1_3__popperjs_core_2_11_7_node_modules_vegafusion-73e0a9.bootstrap.js 2.01 MiB [compared for emit] (id hint: vendors)
    asset vendors-node_modules_pnpm_bootstrap_5_1_3__popperjs_core_2_11_7_node_modules_bootstrap_dist_j-9bff96.bootstrap.js 1.12 MiB [compared for emit] (id hint: vendors)
  asset ts.worker.js 11.4 MiB [compared for emit]
  asset css.worker.js 2.11 MiB [compared for emit]
  asset json.worker.js 933 KiB [compared for emit]
  asset editor.worker.js 492 KiB [compared for emit]
  asset src_index_js-data_image_svg_xml_3csvg_xmlns_27http_www_w3_org_2000_svg_27_viewBox_27-4_-4_8_8-7c0f12.bootstrap.js 105 KiB [compared for emit]
  asset bootstrap.js 17.7 KiB [compared for emit] (name: main)
asset index.html 1.71 KiB [compared for emit] [from: src/index.html] [copied]
orphan modules 252 KiB [orphan] 252 modules
runtime modules 10.2 KiB 14 modules
modules by path ./node_modules/.pnpm/ 2.3 MiB (javascript) 6.63 MiB (webassembly)
  javascript modules 2.3 MiB 362 modules
  ./node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vegafusion-embed/package.json 1.56 KiB [built] [code generated]
  ./node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vegafusion-wasm/vegafusion_wasm_bg.wasm 680 bytes (javascript) 6.63 MiB (webassembly) [built] [code generated]
asset modules 4.4 KiB 16 modules
modules by path ./src/ 62.5 KiB
  modules by path ./src/*.js 60.4 KiB
    ./src/bootstrap.js 279 bytes [built] [code generated]
    ./src/index.js 60.1 KiB [built] [code generated]
  modules by path ./src/*.css 2.09 KiB
    ./src/style.css 1.52 KiB [built] [code generated]
    ./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js!./src/style.css 579 bytes [built] [code generated]

ERROR in ./src/index.js 2:0-65
Module not found: Error: Can't resolve 'monaco-editor/esm/vs/editor/editor.api' in '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/src'
resolve 'monaco-editor/esm/vs/editor/editor.api' in '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/src'
  Parsed request is a module
  using description file: /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/package.json (relative path: ./src)
    aliased with mapping 'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js' to 'monaco-editor/esm/vs/editor/editor.api.js/esm/vs/editor/editor.api'
      Parsed request is a module
      using description file: /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/package.json (relative path: ./src)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/src/node_modules doesn't exist or is not a directory
          looking for modules in /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules
            /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/monaco-editor doesn't exist
          /root/c2/vegafusion/vegafusion-demos/apps/node_modules doesn't exist or is not a directory
          /root/c2/vegafusion/vegafusion-demos/node_modules doesn't exist or is not a directory
          /root/c2/vegafusion/node_modules doesn't exist or is not a directory
          /root/c2/node_modules doesn't exist or is not a directory
          /root/node_modules doesn't exist or is not a directory
          /node_modules doesn't exist or is not a directory
 @ ./src/bootstrap.js 4:0-20

webpack 5.64.2 compiled with 1 error in 6066 ms
 ELIFECYCLE  Command failed with exit code 1.
root@vmi1092129:~/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web# pnpm i monaco-editor
 WARN  deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
 WARN  deprecated @types/[email protected]: This is a stub types definition. fast-json-stable-stringify provides its own type definitions, so you do not need this installed.
Packages: +2 -2
++--
Progress: resolved 496, reused 495, downloaded 0, added 2, done

dependencies:
+ monaco-editor 0.38.0

 WARN  Issues with peer dependencies found
.
└─┬ monaco-editor-webpack-plugin 6.0.0
  └── ✕ unmet peer [email protected]: found 0.38.0

Done in 3s
root@vmi1092129:~/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web# pnpm run build

> [email protected] build /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web
> webpack --config webpack.config.js

[webpack-cli] Error: Cannot find module 'vs/editor/contrib/anchorSelect/anchorSelect'
Require stack:
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/webpack.config.js
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/lib/webpack-cli.js
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/lib/bootstrap.js
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/bin/cli.js
- /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/bin/webpack.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
    at Function.resolve (node:internal/modules/cjs/helpers:109:19)
    at resolveMonacoPath (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js:33:28)
    at /root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js:185:63
    at Array.map (<anonymous>)
    at createLoaderRules (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js:185:43)
    at MonacoEditorWebpackPlugin.apply (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js:91:23)
    at createCompiler (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/lib/webpack.js:73:12)
    at create (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/lib/webpack.js:126:16)
    at webpack (/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/lib/webpack.js:134:47) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/monaco-editor-webpack-plugin/out/index.js',
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/webpack.config.js',
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/lib/webpack-cli.js',
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/lib/bootstrap.js',
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/webpack-cli/bin/cli.js',
    '/root/c2/vegafusion/vegafusion-demos/apps/vegafusion-editor-grpc-web/node_modules/.pnpm/[email protected][email protected]/node_modules/webpack/bin/webpack.js'
  ]
}
 ELIFECYCLE  Command failed with exit code 2.
 ```

</details>

[jonmmease]

Thanks for the info @alexkreidler. Adding "monaco-editor": "^0.30.0" makes sense and I went ahead and updated that in ff34a46.

I'd also be more than happy to add your vite demo if you're interested in making a PR.