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

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: https://github.com/quasarframework/quasar/issues/9780#issuecomment-867168502. 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 https://github.com/quasarframework/quasar/issues/9780#issuecomment-867168502
  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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 17 (7 by maintainers)

Most upvoted comments

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!

+1
mYnDstrEAm on Aug 5, 2021

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");
+1
hawkeye64 on Aug 4, 2021

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

+1
hawkeye64 on Aug 4, 2021
Read more comments on GitHub
← quasar: Modal cannot be closed
quasar: QRouteTab no longer matches child routes →