[Vue.js 3] Module not found: Error: Can't resolve 'crypto' in

Compiled with problems: ERROR in  Module not found: Error: Can't resolve 'crypto' in  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 }

 

webpack 버전이 5 이상이면 만날 수 있는 에러임. 매우 귀찮음.

해결 방법은 두 가지였음.

 - webpack 버전 낮추기

 - 이 블로그 게시글을 참고

 

나는 블로그 따라하기로 함.

 

1. node-polyfill-webpack-plugin 설치

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

 

2. vue.config.js 수정

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

module.exports = defineConfig({
  ... 생략 ... ,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
    optimization: {
      splitChunks: {
        chunks: "all",
      },
    },
  },
})

 

3. 실행

npm run serve

 

끝!