【问题标题】:Module not found: Error: Can't resolve 'fs' in找不到模块:错误:无法解析“fs”
【发布时间】:2019-12-01 08:43:07
【问题描述】:

好的,我将 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
  }
}

而我的 b 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",
  • 你能运行“npm audit fix”吗
  • 是的,我可以运行它,但不能解决它

标签: javascript angular


【解决方案1】:

错误是因为angular-cli 不支持节点中的模块,如“fs”和“path”。 (Issue)

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

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

我希望这对某人有所帮助。

谢谢。

【讨论】:

  • 仍然出现错误。我正在使用 Angular 10。 Electron 10.1 我应该在哪里粘贴您的代码?在根节点?还是在“依赖项”节点内?
  • 你检查packages.json文件了吗?
  • 我在 Angular 10 测试中尝试使用 firebase/testing 模块时遇到此错误。这为我解决了这个问题,除了我必须包含更多的库,所以它最终是:"browser": { "fs": false, "path": false, "os": false, "net": false, "tls": false }
  • 文件名不是package.json而不是packages.json吗? (单数)- 不适用于 Webpack 5。
  • 将它粘贴到 package.json 的根目录中,就在 scripts 之前,现在它可以工作了。谢谢!
【解决方案2】:

对我来说,解决方案是将其添加到 webpack 配置中:

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

如果你使用 NuxtJS 的另一种解决方案:

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

如果你使用NextJS(未测试,请确认它在cmets中有效):

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

在其他情况下,请参阅 Anjana Silva 的帖子。编辑您的 package.json 文件就可以完成这项工作!

【讨论】:

  • 这奇迹般地为我工作。我正在通过 NextJS(不是 NuxtJS)使用 Webpack。
  • 它也适用于我,在使用 nx 和 npm/yarn 工作区的 monorepo 中使用 webpack 的故事书。谢谢!
【解决方案3】:

对于Webpack > 5
更新webpack.config.js

module.exports = {
    ...
    resolve: {
        fallback: {
            "fs": false
        },
    }
}

Can't resolve 'fs' when bundle with webpack #447

【讨论】:

  • 它似乎适用于某些人,但它不适用于我,使用 Next.js v10.2。
  • 我们如何配置 karma 以便为测试环境提供空模块或模拟模块?
【解决方案4】:

tl;博士

对于为 Node.js 进行编译的人员:将 target: node 添加到 webpack.config.js 文件中。

说明

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

【讨论】:

    【解决方案5】:

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

    【讨论】:

      【解决方案6】:

      我遇到了同样的错误,但这是由于我的错误,因为我使用 axios 进行网络请求,但在我的应用程序中的某个点我输入了重定向并按下回车,我的代码完成导入了“import {从“next/dist/next-server/server/api-utils”重定向};' 删除此行允许我继续“下一个构建”。

      参考此链接:https://github.com/vercel/next.js/issues/9768

      【讨论】:

      • 好吧,这为我节省了大量时间。显然 VSCode 自动完成在我的文件顶部添加了“import { response } from "express";”,我没有注意到。谢谢!!
      【解决方案7】:

      我正在使用 Nuxt.JS 对我有用的是使用@thisismyname 解决方案,并将其添加到 nuxt.config.js,如下所示:

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

      【讨论】:

        【解决方案8】:

        你能试试这些步骤吗?

        1. 删除node_modules
        2. 删除package-lock.json
        3. package.json 中删除"fs": "0.0.1-security"
        4. npm install --save

        【讨论】:

        • 好吧,我都做了。但仍然得到错误。查看我更新的帖子
        • 我看到 package-lock.json 也不再重新创建了
        • 您还有其他建议吗?
        • fs的更新版本有一些变化,可以分享一下使用fs的线路吗?它应该在 gulp 构建文件中,还请指定您使用的节点 JS 的版本,即使这可能是一个问题
        • @mightycodeNewton 你有没有想过这个问题?我遇到了同样的问题,并且已经找到了解决方法。
        【解决方案9】:

        对于 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
            },
          }
        }
        

        【讨论】:

          【解决方案10】:

          对于那些正在使用 react 或 next js 的人。这可能是由于从 express 自动导入 json!

          import { json } from 'express'
          

          所以,请确保该行不是自动导入的。

          【讨论】:

            【解决方案11】:

            我也有同样的问题。但是将我的文件夹从c# 重命名为csharp 后,问题就消失了。

            【讨论】:

              【解决方案12】:

              对于 Laravel Mix (^4.0),我解决了:

              mix.webpackConfig({
                  "node": {
                      fs: 'empty',
                  }
              });
              

              在 webpack.mix.js 中

              【讨论】:

              • 对于 Laravel Mix 6 呢?
              【解决方案13】:

              我遇到的一个问题是有人将node 添加到tsconfig.spec.json

              删除解决了问题。

              {
                "compilerOptions": {
                   "types": [
                      ...
                      "node", // Remove this line
                   ]
                }
              }
              

              【讨论】:

                【解决方案14】:

                它对于非反应应用程序的 webpack 行为,您需要将任何错误返回添加到 webpack 配置中的外部对象。对我来说,“react-native-fs”和“fs”本身都显示在错误日志中。添加这些然后重建 外部:{ 'react-native-fs': 'reactNativeFs', 'fs': 'reactNativeFs'}

                【讨论】:

                • 正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center
                猜你喜欢
                • 2018-06-29
                • 2019-05-31
                • 2017-04-18
                • 1970-01-01
                • 2020-02-24
                • 2022-06-20
                • 2022-06-27
                • 1970-01-01
                相关资源
                最近更新 更多