[vue 오류] Module not found: Error: Can't resolve 'crypto' / webpack < 5 used to include polyfills for node.js core modules by default.

룽지·2022년 7월 14일
0

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",
      },
    },
  },
});
  • 추가하고 다시 실행하면 오류가 해결된다.

1개의 댓글

comment-user-thumbnail
2022년 10월 19일

crypto-browserify를 사용하면 어떨까요?

답글 달기