I have a nodejs app created through the Vue CLI. I need to use the aws4 node module to sign my requests. However, when I use the aws4 module the app fails to serve due to the following error:

ERROR in ./node_modules/aws4/aws4.js 4:13-30
Module not found: Error: Can't resolve 'crypto' in 'C:\Users\henry\Repos\AWS4 TEST\aws4-test\node_modules\aws4'

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

I got this error for the 3 imports in the aws module: crypto, url and querystring.

I read the error message and saw that the version of webpack the vue cli uses is 5 so the core modules such as crypto are not included anymore.

(I've never really used webpack before, but the instructions seems simple.)

I created a new file in my project webpack.config.js and added the following:

module.exports = {
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify'),
    },
  },
};

I then installed the crypto-browserify package.

I still get the error, it's make 0 difference.

I've looked online and have tried solutions suggested for the crypto not found issue. None of them seem to work either. I've tried:

• Adding this to the package.json

"browser": {
    "crypto": false
}

• Adding the crypto object to the paths object in tsconfig.json

"compilerOptions": {
"baseUrl": "./",
"paths": {
   "crypto": ["node_modules/crypto-browerify"],
}

• I tried using the node module: node-polyfill-webpack-plugin. Which did resolve the issue for url and querystring (as soon as the module was imported). But the issue with crypto remains.

Here is my package.json

{
  "name": "aws4-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "aws4": "^1.11.0",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "node-polyfill-webpack-plugin": "^2.0.0",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@types/aws4": "^1.11.2",
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "jest": "^27.0.5",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5",
    "vue-template-compiler": "^2.6.14"
  },
  "browser": {
    "crypto": false
  }
}

To isolate the issue I created a new vue 2 app though the cli then just added the aws4 and axios modules. The fact that the node-polyfill-webpack-plugin works to resolve the errors for all but crypto error seems odd. Perhaps something else is overwritting that.

Thanks for your help.

CodePudding user response：

The reason the webpack config wasn't working was because I am using the vue-cli-service. So to configure the webpack config I needed to edit the vue.config.js file and use the configureWebpack object. Docs here: https://cli.vuejs.org/guide/webpack.html