ReferenceError: require is not defined in @babel/runtime/helpers/esm/extends.js

[yi-you]

Description

I'm encountering a ReferenceError: require is not defined error in my Vue project when building with Webpack. The error occurs in the @babel/runtime/helpers/esm/extends.js file.

Environment

• Vue version: 2.6.10
• Webpack version: 5.88.2
• Babel version: 7.22.10
• Node.js version: 16.20.1
• OS: Windows 10

Error Details

ReferenceError: require is not defined
    at ./node_modules/@babel/runtime/helpers/esm/extends.js (extends.js:3:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@uiw/codemirror-theme-github/esm/index.js (chunk-vendors.cf2ca45f-2.1.7.js:19:88)

[jaywcjlove]

Vue version: 2.6.10 ?????

@yi-you Can it run in vue?

[jaywcjlove]

@yi-you

• https://github.com/vitejs/vite/issues/3409
• https://www.npmjs.com/package/vite-plugin-require-transform

[yi-you]

Vue version: 2.6.10 ?????

@yi-you Can it run in vue?

Yes, it runs normally when I use node12 + webpack4.

[yi-you]

@yi-you

• require is not defined when importing a node_module that imports a CSS file vitejs/vite#3409
• https://www.npmjs.com/package/vite-plugin-require-transform

emm, I'm using vue-cli 5.0.8 😂 I'm going to check how to upgrade to Vite.

[yi-you]

Is the codemirror-theme-github compatible with babel7 and webpack5?

[jaywcjlove]

@yi-you I can't reproduce your error

https://codesandbox.io/embed/codemirror-v6-vite-uiw-codemirror-theme-github-t7f3gp?fontsize=14&hidenavigation=1&theme=dark

[yi-you]

Thank you very much. I've also set up a demo to test this theme, and it works perfectly.