"Module not found: Can't resolve imported dependency "fs"" after upgrading to v2 when using the MonacoEditor component

[mYnDstrEAm]

Describe the bug
After upgrading Quasar to v2 like it worked for another project I got a lot of Module not found errors. Most of these could be resolved by implementing this: #9780 (comment). However, from the docs it seems like this isn't the preferred solution and some errors remained. The remaining errors can be found below.

It's probably caused by using the monaco-editor component which has more (or some specific) features than QuasarEditor which is why I used it. How to solve this (probably trivial)?

 App • Chaining "Renderer" Webpack config
 App • Extending "Renderer" Webpack config
 App •  WAIT  • Compiling of "Renderer" in progress...
 App •  DONE  • "Renderer" compiled with errors • 14297ms



 App •  ERROR  •  Renderer  in ./node_modules/graceful-fs/graceful-fs.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  Renderer  in ./node_modules/jest-worker/build/workers/ChildProcessWorker.js

Module not found: Can't resolve imported dependency "child_process"
Did you forget to install it? You can run: npm install --save child_process

 App •  ERROR  •  Renderer  in ./node_modules/jest-worker/build/workers/NodeThreadsWorker.js

Module not found: Can't resolve imported dependency "worker_threads"
Did you forget to install it? You can run: npm install --save worker_threads

 App •  ERROR  •  Renderer  in ./node_modules/loader-runner/lib/LoaderRunner.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  Renderer  in ./node_modules/monaco-editor-webpack-plugin/out/index.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  Renderer  in ./node_modules/terser/node_modules/source-map/lib/read-wasm.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  Renderer  in ./node_modules/watchpack/lib/LinkResolver.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

 App •  ERROR  •  Renderer  in ./node_modules/webpack/lib/config/defaults.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs


 App •  COMPILATION FAILED  • Please check the log above for details.

Codepen/jsFiddle/Codesandbox (required)

To Reproduce
Steps to reproduce the behavior:

1. Upgrade a project using the monacoeditor component from v1 to v2 and remove and readd electron mode to upgrade electron (it worked with v1)
2. Implement "Module not found:" compilation error for modules (stream, http, https, constants, zlib_bindings) #9780 (comment)
3. Run quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox (or quasar dev -m electron)

Expected behavior
Expected step 2 to not be necessary or not be a little risky and the project to build via step 3.

Screenshots

Platform (please complete the following information):
Quasar Version:
@quasar/app Version:3.0.3

Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS:Debian10/KDE
Node:v12.22.2
NPM:7.20.3
Yarn:
Browsers:
iOS:
Android:
Electron:13.1.7

Additional context

[hawkeye64]

@mYnDstrEAm Please read the upgrade guide here: https://quasar.dev/start/upgrade-guide#nodejs-polyfills

[mYnDstrEAm]

@mYnDstrEAm Please read the upgrade guide here: https://quasar.dev/start/upgrade-guide#nodejs-polyfills

@hawkeye64 I did! And even linked it in my question (the docs). These errors are showing after implementing what is written there – it's just fewer errors than before implementing it.

(Please reopen or write how this can be solved when that is already implemented.)

[mYnDstrEAm]

Should I try creating a new project with v2 rather than upgrading and copy over the code and see if that works? If it does something of the upgrade doesn't work because I installed node-polyfill-webpack-plugin (npm i --save-dev node-polyfill-webpack-plugin) and added that code of the docs to quasar.conf.js->build. (And also tried commenting out any const fs = require('fs') and fs-using code in the .vue files even though that worked earlier.)

[rstoenescu]

@mYnDstrEAm please share a reproduction repo (or fork https://codesandbox.quasar.dev and post the link here)

[mYnDstrEAm]

I created a blank new project with v2 via quasar create and found that it's caused by this line in a boot-file (referenced in quasar.conf.js):
import MonacoEditorPlugin from "monaco-editor-webpack-plugin";
Using the monacoeditor worked previously with Quasar v1 (when using quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox and also having import MonacoEditor from "vue-monaco";(?)).
I still get errors about "vm" "http" "https" etc when implementing the polyfill of the upgrade guide despite already using Quasar v2 right from the start (no upgrade). I didn't make any other changes except installing those npm packages and using the component in Index.vue (and quasar new boot MonacoEditor).

How to import the Monaco editor component in a Quasar v2 project?

It seems like the "monaco-editor-webpack-plugin" isn't really needed but only "vue-monaco" is. It used to work before trying to upgrade to v2 and now I can't find any guidance about how to use external components in the docs. I think this needs a boot-file (just like before but somehow without "monaco-editor-webpack-plugin") and not just using import MonacoEditor from 'vue-monaco' in Index.vue but I couldn't find clear info about this in the docs. Either I made a mistake and overlooked sth in the docs or the docs probably need to be updated or expanded.

Contents of the boot file MonacoEditor of the project that worked with v1 are:

import Vue from "vue";
import MonacoEditorPlugin from "monaco-editor-webpack-plugin";

Vue.component('MonacoEditorPlugin', MonacoEditorPlugin)

The current boot file is the default boot file content.
Please reopen or recommend creating a new issue instead if the issue is one of missing or unclear info in the docs.

[hawkeye64]

@mYnDstrEAm A webpack plugin cannot be used as a Vue component. I think you meant to type vue-monaco. Plus, looking at the docs for vue-monaco, I wouldn't says it's Vue 3 compatible since the instructions are using the Options API and not the Composition API and @egoist is pretty good about keeping things up to date.

[mYnDstrEAm]

So it's not working anymore because vue-monaco is incompatible with Vue3? I tried other things first but this is how the file looked like when I finally got it to work with Quasar v1.
Is there another way to use the monaco-editor component in Quasar if it is incompatible? (At least for as long as QuasarEditor is lacking a few features that editor has.)

[hawkeye64]

if you want to work with Quasar v2/Vue v3, then follow this thread: https://stackoverflow.com/questions/65025408/monaco-editor-web-worker-issue-with-vue-3

[mYnDstrEAm]

@hawkeye64 Thanks! However, there's no vue.config.js in Quasar projects so the answer there doesn't describe how to get it working with QF. As it used to work just fine I would have expected info about handling webpack-related things or whatever caused it to break to be in the upgrade guide. This page doesn't exist. So I can only speculate that I need to add sth like this to quasar.conf.js->build:

extendWebpack(cfg) { 
        cfg.plugins.push(new MonacoEditorPlugin( {
        } ))

or maybe

 chainWebpack(chain) {
        chain
          .plugin("monaco-editor-webpack-plugin")
          .use(MonacoEditorPlugin);
      },

Is that right? Could you provide a little more info if that isn't in the docs but used to work? Should "monaco-editor-webpack-plugin" be imported in the boot-file (results in the errors of the issue) or in quasar.conf.js (doesn't look right and I get the error "Conflict: Multiple assets emit different content to the same filename fonts/codicon.ttf") or elsewhere or not at all? Why make things more complex than they need to be and the info could be in or added to the docs.

[hawkeye64]

I don't know where that url came from. Try this one: https://quasar.dev/quasar-cli/handling-webpack

I find extendWebpack to be buggy at times, so stick with chainWebpack.

Yes. Don't forget to import in quasar.conf.js...

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

[mYnDstrEAm]

Thanks, didn't forget about it but I still get this error in that case ("Conflict: Multiple assets emit different content to the same filename fonts/codicon.ttf"). I thought maybe it could be solved by specifying output within chainWebpack similar to here but I couldn't find out how.

[hawkeye64]

("Conflict: Multiple assets emit different content to the same filename fonts/codicon.ttf").

Could be that you have the same file included twice somewhere?

[mYnDstrEAm]

It was because I still had import TheMonacoEditor from 'vue-monaco' somewhere. Got it to work now (like in the readme of monaco-editor-webpack-plugin and without a component):
<div id="container" style="height: 500px; width: 500px;" /> and

mounted() {
    TheMonacoEditor.editor.create(document.getElementById("container"), {
      value: 'console.log("Hello, world")',
      language: "javascript",
    });
  },

Thank you very much!

[mYnDstrEAm]

However, I need the Vue component so I need to find out how to solve this error and asked about it here.

[mYnDstrEAm]

No answer there so far, please let me know if you have any idea how this could be solved (import MonacoEditor from 'vue-monaco'; is only done once). From these two 1 2 it seems like specifying output could solve it, if so how could it be implemented for Quasar? It worked earlier and the error occurs once I import from 'vue-monaco' so I think it's bundling a font like another package does.

[hawkeye64]

@mYnDstrEAm Sorry, I am out of ideas. :(

[Kinghts]

@mYnDstrEAm Please read the upgrade guide here: https://quasar.dev/start/upgrade-guide#nodejs-polyfills

@hawkeye64 I did! And even linked it in my question (the docs). These errors are showing after implementing what is written there – it's just fewer errors than before implementing it.

(Please reopen or write how this can be solved when that is already implemented.)

My electron app got the same error, and i fixed it:

ref: https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

  build: {
    ...
    chainWebpack(chain) {
      ...
      const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin');
      chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin);
    },
    // I don't know how to set it by webpack-chain
    extendWebpack (cfg, { isServer, isClient }) {
      cfg.resolve.fallback = { fs: false };
    },
  },