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

 

 

 

 

이번에 프로젝트를 진행하면서 crypto를 사용할 일이 있었는데..

crypto라는 모듈은 기본적으로 node에서 제공중이라고 해서 이걸 사용하려고 했다.

(처음에는 crpyto-js 라이브러리를 설치해서 하려고 했는데, 이 친구 비대칭키는 지원 안한다고 해서 안함..)

 

근데 막상 import해서 사용하려고 하니 다음과 같은 에러가 발생했다.

Module not found: Error: Can't resolve 'crypto' / webpack < 5 used to include polyfills for node.js core modules 

by default. 라는 에러가 발생했다. 

 

 

에러발생

 

crypto import코드

const crypto = require('crypto')
//에러 발생
//Module not found: Error: Can't resolve 'crypto' / webpack < 5 used to include polyfills for node.js core modules by default.

 

에러 내용을 대충 읽어보면 crypto 모듈을 찾을 수 없다.

node.js에서 코어 모듈을 사용하기 위해서는 polyfills가 포함되어야 한다??? ( 영어는 못함.. ) 라고 한다..

 

 

해결방법

 

polyfills 플러그인 설치

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

 

 

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()], // NodePolyfillPlugin 생성자 추가
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  },
});

 

 

1) const NodePolyfillPlugin = require("node-polyfill-webpack-plugin"); => NodePolyfillPlugin import

2) configureWebpack: { plugins: [new NodePolyfillPlugin()] } => configureWebpack객체에 plugins 추가

 

이렇게 하고 vue.config.js를 수정했으니 서버를 재가동 하면 에러가 사라질 것이다.

 

 

 

 

 

참조링크

https://velog.io/@ingdol2/vue-%EC%98%A4%EB%A5%98-Module-not-found-Error-Cant-resolve-crypto

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