crypto 및 webpack 오류

오류 내용

Module not found: Error: Can't resolve 'crypto'
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 }

오류난 코드

const crypto = require('crypto')
const password = crypto.createHash('sha512').update('eeee').digest('base64')
console.log(password)

• 암호화를 위해 crypto를 사용했는데
  • crypto는 nodejs 안에 있는 모듈이라 아무런 설치 없이 동작되어야 하는데
  • 계속 모듈이 없다는 오류가 발생했다.
• 그리고 webpack 5 에서 오류가 발생했다고 나왔다.
  

오류 해결 방법

npm 설치

npm install --save node-polyfill-webpack-plugin

vue.config.js에 코드 추가

• vue.config.js 파일에 다음과 같은 코드를 추가한다.

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  },
});

• 추가하고 다시 실행하면 오류가 해결된다.

crypto 오류 해결 과정

• 암호화를 하기 위해 crypto를 사용했는데 다음과 같은 오류가 났다.

  Module not found: Error: Can't resolve 'crypto'

오류난 코드

const crypto = require('crypto')
const password = crypto.createHash('sha512').update('eeee').digest('base64')
console.log(password)

• node.js 안에는 crypto 라이브러리가 있기 때문에 위와 같이 사용하면 된다고 했는데 아무래도 포함이 안된건지 계속 모듈을 찾지 못한다는 오류가 뜬다.
• 이에 대한 오류는 다음과 같은 해결들을 찾을 수 있었다.

1차 시도

[Solved] Module not found: Error: Can’t resolve ‘crypto’

• 위에서는 'package.json' 파일 안에 다음과 같은 코드를 넣으라는 해결책이었다.

"devDependencies": {
    ...
},
"browser": {
    "crypto": false
}

오류 해결 실패

• 위와 같이 추가하면 crypto 모듈은 찾을 수 있지만 crypto.createHash를 못찾겠다는 오류가 발생한다.

  TypeError: crypto.createHash is not a function

다른 오류 발견

• 위에 방법은 다시 지우고 crypto 오류가 난 상태에서 다음 오류도 같이 발생했다.

  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 }

2차 시도

• 위에 오류는 웹팩 버전이 달라서 일어난 오류이다.
• webpack 5에서 여러 문제가 발생하기 때문에 이 문제를 해결 방법이 다음 사이트에서 찾을 수 있었다.
  Webpack 5 Issues

npm 설치

npm install --save node-polyfill-webpack-plugin

vue.config.js에 코드 추가

• vue.config.js 파일에 다음과 같은 코드를 추가한다.

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  },
});

• 추가하고 다시 실행하면 오류가 해결된다.