logo标签列表

模块未找到：错误：无法解析 'fs' 错误 - 已解决

javascriptangular
180

好的，我将Angular从6升级到8。但是我仍然遇到错误。

我在互联网上找到了一个解决方案，对很多用户有帮助。但在这种情况下，它对我没有帮助。

所以我的package.json文件如下所示：

{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "fs": "0.0.1-security",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

我的 tsconfig.json 文件如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
   "angularCompilerOptions": {
     "enableIvy": false
   }
}

但我仍然遇到这些错误：

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/node-modules-paths.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'

我找到了一个可能的解决方案，你必须在其中一个node_modules中进行一些配置。但我认为这不是一个好的解决方案。因为如果你移除所有的导入然后再次安装导入，你的配置就会消失。

谢谢

好的，我已经移除了

 "fs": "0.0.1-security",

我删除了所有的包（node_modules），然后进行了 npm 安装。

但现在我得到了这个：

(node:13880) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
Binary found at C:\Source\nien\vital10-frontend\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> vital10-frontend@0.55.0 postinstall C:\Source\nien\vital10-frontend
> node patch-webpack.js

internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vital10-frontend@0.55.0 postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vital10-frontend@0.55.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_25_46_184Z-debug.log
PS C:\Source\nien\vital10-frontend>

我的package.json文件现在是这样的：
{
  "name": "vital10-frontend",
  "version": "0.55.0",
  "license": "Unlicensed",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "hmr": "ng serve --configuration hmr",
    "build": "ng build",
    "build:prod": "npm run sass:prod && npm run vit10prod",
    "build:acc": "npm run sass:prod && npm run vit10acc",
    "build:test": "npm run sass:prod && npm run vit10test",
    "build:dev": "npm run sass:prod && npm run vit10dev",
    "test": "ng test",
    "test:cover": "ng test --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "local": "ng serve -c local",
    "analyze-bundle": "webpack-bundle-analyzer dist/stats.json",
    "postinstall": "node patch-webpack.js",
    "sass:watch": "sass --watch sass:src\\assets",
    "sass:prod": "sass --update -f --style compressed --sourcemap=none sass:src\\assets",
    "vit10dev": "ng build --prod -c vit10dev",
    "vit10test": "ng build --prod -c vit10test",
    "vit10acc": "ng build --prod -c vit10acc",
    "vit10prod": "ng build --prod -c production"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.1.2",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.1.2",
    "@angular/compiler": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/platform-server": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@types/chart.js": "^2.7.54",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "events": "^3.0.0",
    "jasmine": "^3.1.0",
    "ng2-charts": "^1.6.0",
    "ng2-dragula": "^2.1.1",
    "ng2-pdf-viewer": "^5.0.1",
    "node-sass": "^4.11.0",
    "oidc-client": "^1.5.1",
    "path": "^0.12.7",
    "pdfjs-dist": "^2.0.489",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.2",
    "@angular/cli": "^8.1.2",
    "@angular/compiler-cli": "^8.1.2",
    "@angular/language-service": "^8.1.2",
    "@angularclass/hmr": "^2.1.3",
    "@compodoc/compodoc": "^1.1.10",
    "@types/jasmine": "^3.3.14",
    "@types/node": "^12.6.8",
    "chai": "^4.1.2",
    "codelyzer": "^5.1.0",
    "convert-csv-to-json": "0.0.13",
    "cucumber": "^4.2.1",
    "cucumber-html-reporter": "^5.0.0",
    "cucumber-junit": "^1.7.1",
    "express-static": "^1.2.5",
    "jasmine-core": "^3.4.0",
    "jasmine-reporters": "^2.3.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.2.0",
    "karma-chrome-launcher": "^3.0.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-html-reporter": "^0.2.7",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "karma-junit-reporter": "^1.2.0",
    "karma-teamcity-reporter": "^1.1.0",
    "moment": "^2.22.1",
    "prettier": "1.13.4",
    "protractor": "^5.4.2",
    "protractor-beautiful-reporter": "^1.2.1",
    "protractor-cucumber-framework": "^5.0.0",
    "puppeteer": "^1.14.0",
    "request": "^2.87.0",
    "request-promise-native": "^1.0.5",
    "ts-node": "^3.3.0",
    "tslint": "^5.18.0",
    "tslint-angular": "^1.1.2",
    "typescript": "3.4.5",
    "webpack-bundle-analyzer": "^3.3.2",
    "xlsx": "^0.12.13"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }
}

仍然出现这些错误：

(node:15956) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module 'C:\Source\nien\vital10-frontend\patch-webpack.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vital10-frontend@0.55.0 postinstall: `node patch-webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vital10-frontend@0.55.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nien\AppData\Roaming\npm-cache\_logs\2019-07-23T10_59_04_891Z-debug.log
PS C:\Source\nien\vital10-frontend>

我仍然遇到这三个错误：

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\resolve\lib'
ERROR in ./node_modules/tslint/lib/utils.js
Module not found: Error: Can't resolve 'fs' in 'C:\Source\nien\vital10-frontend\node_modules\tslint\lib'
i ｢wdm｣: Failed to compile.
你尝试过从你的package.json中删除"fs": "0.0.1-security",吗？ - Christheoreo
你能运行 "npm audit fix" 吗？ - yanky_cranky
是的，我可以运行它，但这并不能解决它。 - mightycode Newton
22个回答
208

这个错误是因为angular-cli不支持类似于“fs”和“path”这样的节点模块。 (问题链接)

在“package.json”文件的根目录下添加以下内容。

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

Angular应用程序（例如Angular CLI创建的应用程序）是浏览器应用程序。fs在浏览器上不可用，只能在node应用程序上使用。

10
仍然出现错误。我正在使用 Angular 10 和 Electron 10.1。 我应该把你的代码粘贴在哪里？在根节点中还是在“dependencies”节点内部？ - JeeShen Lee
2
你有检查过 packages.json 文件吗？ - Anjana Silva
4
我在Angular 10测试中尝试使用firebase/testing模块时遇到了错误。这段代码解决了我的问题，但我还需要包含其他一些库才能实现： "browser": { "fs": false, "path": false, "os": false, "net": false, "tls": false } - Alex Egli
6
文件名不是packages.json而是package.json（单数）- 与Webpack 5不兼容。 - Vadorequest
6
对我没起作用...我正在使用React。 - Francesco Dassisis
显示剩余11条评论
99
1
似乎对一些人有效，但我使用的 Next.js v10.2 却无法正常工作。 - Vadorequest
我们如何配置Karma以在测试环境中提供空的或模拟的模块？ - Guntram
使用 cra 5 和 customize-cra 对我有效。 - Packet Tracer
47

对我来说，解决方案是将以下内容添加到webpack配置文件中：

config.node = {
  fs: 'empty',
}

如果您使用NuxtJS，则还有另一种解决方案：

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},

如果您使用NextJS（未经测试，请在评论中确认其可行性）：

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  config.node = {
    fs: 'empty'
  }
  return config
},

在其他情况下，请参考 Anjana Silva 的帖子。编辑您的package.json文件即可完成工作！

4
这对我奇迹般地起了作用。我正在通过NextJS（而不是NuxtJS）使用Webpack。 - Marty McGee
2
它对我也起作用了，在使用nx和npm/yarn工作区的monorepo中为storybook使用webpack。谢谢！ - McGiogen
注意：我在/node_modules/react_scripts/config/文件夹中找到了webpack.config.js。 - user1300214
1
这个 Nuxt 解决方案对我有效。 - Joseph Beard
NextJS解决方案无效。错误[ValidationError]：配置对象无效。Webpack已使用与API模式不匹配的配置对象进行初始化。- 配置[0].node具有未知属性'fs'。 - Roman
32

对于 NextJS 12： next.config.js

module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,

    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          "fs": false,
          "path": false,
          "os": false,
        }
      }
      return config
    },
  }
}
2
对于任何试图在Nextjs的SSG上实现i18n的人，请遵循https://dev.to/adrai/static-html-export-with-i18n-compatibility-in-nextjs-8cd，这是解决“无法解析fs”问题的方法！ - KuN
25

简要概述

对于为Node.js进行转译的人：在webpack.config.js文件中添加target: node。

解释说明

我知道这是一个Angular问题，但那些为Node.js进行转译的人必须记住，默认情况下，Webpack会将代码转译为浏览器目标，其中你没有由Node.js提供的模块。如果您将运行转译后的代码的环境确实为Node.js，那么只需在配置文件中加上target: node即可。

8

只需将{node:'empty'}添加到您的webpack.config文件中即可。

3
如果我没有 webpack.config 文件呢 哈哈 - Ap0st0l
4

对于使用 Laravel 8 和 Laravel-mix ^5 的用户

mix.webpackConfig({
    resolve: {
        fallback: { fs: false }
    }
});

这是针对webpack < 5的： mix.webpackConfig({ node: { fs: 'empty', } }) 在你的webpack.mix.js中添加这个。
4

我正在使用Nuxt.JS 对我而言有效的方法是采用@thisismyname的解决方案，并将其添加到nuxt.config.js中，如下所示：

// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
    extend(config, {}) {
        config.node = {
            fs: 'empty'
        }
    }
},
4
我遇到了相同的错误，但是这是我的错误，因为我在使用axios进行网络请求时，在应用程序的某个地方我输入了“redirect”并按下了回车键，我的代码自动导入了“import {redirect} from"next / dist / next-server / server / api-utils";"。删除此行允许我继续使用“next build”。
参考此链接：https://github.com/vercel/next.js/issues/9768
好的，这节省了我大量的时间。显然，VSCode自动完成在我的文件顶部添加了“import {response} from "express";”，而我没有注意到。谢谢！ - DXM
3

对于那些使用React或Next.js的人来说，这可能是由于从Express自动导入JSON而发生的问题！

import { json } from 'express'

所以，请确保此行未被自动导入。
2
我并没有从express中导入json，而是从express中导入了response！我做了所有的配置覆盖和节点模块webpack配置，但是一旦我删除了response，它就起作用了。只有那一行让我进入了7个小时的调试模式。因为它有帮助，所以我点赞了它。谢谢Mohammad :) - Wahab Shah
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接