"Module not found: Can't resolve imported dependency "fs"" after upgrading to v2 when using the MonacoEditor component
See original GitHub issueDescribe 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:
- Upgrade a project using the monacoeditor component from v1 to v2 and remove and readd electron mode to upgrade electron (it worked with v1)
- Implement https://github.com/quasarframework/quasar/issues/9780#issuecomment-867168502
- Run
quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
(orquasar 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:17 (7 by maintainers)
Top GitHub 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;" />
andThank you very much!
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 withchainWebpack
.Yes. Don’t forget to import in quasar.conf.js…