Module not found: Error: Can't resolve 'fs'， Module not found: Error: Can't resolve 'path'

hujun199103 commented 2 years ago

Version

5.0.8

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
  Binaries:
    Node: 16.16.0 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)    
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.8
    @vue/babel-preset-jsx:  1.3.0
    @vue/babel-sugar-composition-api-inject-h:  1.3.0
    @vue/babel-sugar-composition-api-render-instance:  1.3.0
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.3.0
    @vue/babel-sugar-v-on:  1.3.0
    @vue/cli-overlay:  5.0.8
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8
    @vue/cli-plugin-router:  5.0.8
    @vue/cli-plugin-vuex:  5.0.8
    @vue/cli-service: ~5.0.0 => 5.0.8
    @vue/cli-shared-utils:  5.0.8 (4.5.19)
    @vue/compiler-core:  3.2.37
    @vue/compiler-dom:  3.2.37
    @vue/compiler-sfc:  3.2.37
    @vue/compiler-ssr:  3.2.37
    @vue/component-compiler-utils:  3.3.0
    @vue/reactivity:  3.2.37
    @vue/reactivity-transform:  3.2.37
    @vue/runtime-core:  3.2.37
    @vue/runtime-dom:  3.2.37
    @vue/server-renderer:  3.2.37
    @vue/shared:  3.2.37
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^8.0.3 => 8.7.1
    vue: ^3.2.13 => 3.2.37
    vue-cli-plugin-electron-builder: ~2.1.1 => 2.1.1
    vue-eslint-parser:  8.3.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  17.0.0 (15.10.0)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

终端运行：yarn electron:serve 出现如下错误 ERROR Failed to compile with 2 errors 16:45:23

error in ../node_modules/electron/index.js

Module not found: Error: Can't resolve 'fs' in 'E:\programing\electron\chapter1\node_modules\electron'

error in ../node_modules/electron/index.js

Module not found: Error: Can't resolve 'path' in 'E:\programing\electron\chapter1\node_modules\electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }

ERROR in ../node_modules/electron/index.js 3:11-24 Module not found: Error: Can't resolve 'fs' in 'E:\programing\electron\chapter1\node_modules\electron' @ ../node_modules/@electron/remote/dist/src/renderer/remote.js 16:19-38 @ ../node_modules/@electron/remote/dist/src/renderer/index.js 27:13-32 @ ../node_modules/@electron/remote/renderer/index.js 1:0-48 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 2:0-52 10:6-22 14:6-22 18:6-22 22:6-22 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 9:49-55 @ ./src/main.js 2:0-28 3:10-13

ERROR in ../node_modules/electron/index.js 5:13-28 Module not found: Error: Can't resolve 'path' in 'E:\programing\electron\chapter1\node_modules\electron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } @ ../node_modules/@electron/remote/dist/src/renderer/remote.js 16:19-38 @ ../node_modules/@electron/remote/dist/src/renderer/index.js 27:13-32 @ ../node_modules/@electron/remote/renderer/index.js 1:0-48 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&lang=js 2:0-52 10:6-22 14:6-22 18:6-22 22:6-22 @ ./src/App.vue?vue&type=script&lang=js 1:0-189 1:0-189 1:190-368 1:190-368 @ ./src/App.vue 2:0-54 3:0-49 3:0-49 9:49-55 @ ./src/main.js 2:0-28 3:10-13

webpack compiled with 2 errors

What is expected?

如何解决这个问题

What is actually happening?

解决问题

sumitpanchbhai1998 commented 1 year ago

IS there any solution fo this ??

jazzy1986 commented 8 months ago

facing same problem

jazzy1986 commented 8 months ago

This is because the web base browser do not support fs package, but node have, so you can either set the target in webpack config to "node" or "electron" https://webpack.js.org/configuration/target/

configureWebpack: { target: 'electron' }

vuejs / vue-cli