3

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!

JanakDom
  • 33
  • 1
  • 5

0 Answers0