uniapp introduces vant 2 and reports an error require is not defined

uniapp introduces vant 2 and reports an error require is not defined

---

1. Vue 2 project, install Vant 2

npm i vant@latest-v2

2. Main.js imports Vant components

import Vant from 'vant'
Vue.use(Vant)

3. Run to the browser and report an error

Uncaught ReferenceError: require is not defined
at Module.qioP (chunk-vendors.js:52368:1)
at webpack_require (index.js:854:30)
at fn (index.js:151:20)
at Object.GgBI (chunk-vendors.js:21582:17)
at webpack_require (index.js:854:30)
at fn (index.js:151:20)
at Object.Feqt (chunk-vendors.js:19969:39)
at __webpack_require__ (index.js:854:30)
at fn (index.js:151:20)
at eval (main.js:5:1)

4. Solution

You can add the following code to the vue.config.js configuration file to solve this problem
https://github.com/youzan/vant/issues/10653
https://github.com/dcloudio/uni-app/issues/2412

module.exports = {
    chainWebpack: (config) => {
        config.module
        .rule("mjs$")
        .test(/.mjs$/)
        .include.add(/node_modules/)
        .end()
        .type("javascript/auto");
    },
};