2

would like to use Winston@3 package in our project. But I can't resolve problem with requered 'fs' package.

I always get this error:

Compiled with problems:

ERROR in ./node_modules/winston/dist/winston/tail-file.js 12:9-22
Module not found: Error: Can't resolve 'fs' in '/app/node_modules/winston/dist/winston'

ERROR in ./node_modules/winston/dist/winston/transports/file.js 136:9-22
Module not found: Error: Can't resolve 'fs' in '/app/node_modules/winston/dist/winston/transports'

(Error screenshot)

I tried everything I found. Just like define browser restriction in package.json:

{
  ...
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "devDependencies": {
    "@testing-library/vue": "^6.5.1",
    "@types/applepayjs": "^3.0.4",
    "@types/googlepay": "^0.6.4",
    "@types/jest": "^27.5.2",
    "@types/vue-i18n": "^7.0.0",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vue/cli": "^5.0.4",
    "@vue/cli-plugin-babel": "^5.0.4",
    "@vue/cli-plugin-e2e-cypress": "^5.0.4",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.4",
    "@vue/cli-plugin-typescript": "^5.0.4",
    "@vue/cli-plugin-unit-jest": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.4",
    "@vue/cli-service": "^5.0.4",
    "@vue/compiler-sfc": "^3.2.31",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.2.4",
    "@vue/vue3-jest": "^27.0.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.5.1",
    "cypress": "^11.2.0",
    "eclint": "^2.8.1",
    "eslint": "^8.28.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-vue": "^9.8.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.5.1",
    "jest-runner-groups": "^2.2.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "lint-staged": "^13.0.4",
    "ts-jest": "^27.1.5",
    "tsconfig-paths": "^4.1.1",
    "tslib": "^2.3.1",
    "typescript": "^4.9.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/typescript",
      "plugin:cypress/recommended"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser",
      "ecmaVersion": 2021
    },
    "rules": {
      "no-unused-vars": "off"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.test.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 0.1%",
    "last 10 years",
    "not dead",
    "not ie 11"
  ],
  ...
}

Configure fs: 'empty' in webpack.config.js:

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    fallback: {
      util: require.resolve("util/"),
      "fs": false
    },
    alias: {
      fs: 'empty'
    }
  },
  module: {
    node: {
      fs: 'empty'
    }
  },
};

and also configure fs: 'empty' in vue.config.js where i also configure the webpack:

module.exports = {
  ...
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    resolve: {
      alias: {
        fs: 'empty'
      }
    }
  },
  chainWebpack: (config) => {
    // config.node = {
    //   'fs': 'empty'
    // };

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

I also use TypeScript but I think that one is not causing this problem...

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "allowJs": true,
    "sourceMap": false,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/tests/*": [
        "./tests/*",
      ],
      "@/*": [
        "./src/*",
        "./*"
      ],
      "tslib" : ["bower_components/tslib/tslib.d.ts"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "./src/*.ts",
    "./src/**/*.ts",
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts",
    "./tests/e2e.api.ts"
  ]
}

I have no idea how to fix this. I found a lot of instructions in the internet how to solve it but no one works for me. :(

Is here anyone who knows and can helps me? Thank you!

2
  • 1
    For webpack > 5, this ans seems to solve your exact problem. Dec 7, 2022 at 10:44
  • 1
    The error means that you try to use a lib that was made for Node in a browser. Winston is such library. Dec 7, 2022 at 14:06

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.