Uncaught Error: Dynamic require of "punycode" is not supported

[Rider]

和这个库冲突：md-editor-v3

报错：Uncaught Error: Dynamic require of "punycode" is not supported

package.json

{
  "name": "nstbrowser-dashboard-electron",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "md-editor-v3": "^4.10.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.3.4",
    "electron": "^26.1.0",
    "electron-builder": "^24.6.4",
    "typescript": "^5.2.2",
    "vite": "^4.4.9",
    "vite-plugin-electron": "^0.14.0",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vue-tsc": "^1.8.8"
  },
  "main": "dist-electron/main.js"
}

[xudongdong40]

md-editor-v3 这个不应该是前端库吗，为啥会与 render 有关。

[Rider]

md-editor-v3 这个不应该是前端库吗，为啥会与 render 有关。

但是现在就是冲突了，项目无法运行

[Leo Wang(草鞋没号)]

纯前端库不要开 vite-plugin-electron-renderer 的预构建试下呢，直接用 Vite 构建即可。

[猫爪在上]

遇到类似的问题 Dynamic require of "path" is not supported

在使用这个库之后 foca-electron-storage

[Finger]

@azhengyongqin 请问找到解决方法了吗？@caoxiemeihao 说的关闭renderer()我尝试了是有效的，但是要用其他的Nodejs模块，比如Sqlite之类的，关闭肯定是不现实的。

[Finger]

进一步探究，当contextIsolation为true，也即开启了上下文隔离后问题出现，但是一般contextIsolation都是设置为true的。

[Finger]

进一步探究，当contextIsolation为true，也即开启了上下文隔离后问题出现，但是一般contextIsolation都是设置为true的。

也就是现在初步的有两个解决办法，一个关闭renderer()，另一个关闭contextIsolation。还可以有其他或者更彻底的解决方法吗 @caoxiemeihao

[Finger]

问题解决了

STEP1： 在production bundling期间为EsBuild添加这两个polyfills modules

yarn add --dev @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill

STEP2： 在vite.config.js中添加如下配置

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

export default {
    resolve: {
        alias: {
            // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
            // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
            // process and buffer are excluded because already managed
            // by node-globals-polyfill
            util: 'rollup-plugin-node-polyfills/polyfills/util',
            sys: 'util',
            events: 'rollup-plugin-node-polyfills/polyfills/events',
            stream: 'rollup-plugin-node-polyfills/polyfills/stream',
            path: 'rollup-plugin-node-polyfills/polyfills/path',
            querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
            punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
            url: 'rollup-plugin-node-polyfills/polyfills/url',
            string_decoder:
                'rollup-plugin-node-polyfills/polyfills/string-decoder',
            http: 'rollup-plugin-node-polyfills/polyfills/http',
            https: 'rollup-plugin-node-polyfills/polyfills/http',
            os: 'rollup-plugin-node-polyfills/polyfills/os',
            assert: 'rollup-plugin-node-polyfills/polyfills/assert',
            constants: 'rollup-plugin-node-polyfills/polyfills/constants',
            _stream_duplex:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
            _stream_passthrough:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
            _stream_readable:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
            _stream_writable:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
            _stream_transform:
                'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
            timers: 'rollup-plugin-node-polyfills/polyfills/timers',
            console: 'rollup-plugin-node-polyfills/polyfills/console',
            vm: 'rollup-plugin-node-polyfills/polyfills/vm',
            zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
            tty: 'rollup-plugin-node-polyfills/polyfills/tty',
            domain: 'rollup-plugin-node-polyfills/polyfills/domain'
        }
    },
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis'
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    process: true,
                    buffer: true
                }),
                NodeModulesPolyfillPlugin()
            ]
        }
    },
    build: {
        rollupOptions: {
            plugins: [
                // Enable rollup polyfills plugin
                // used during production bundling
                rollupNodePolyFill()
            ]
        }
    }
}

[Leo Wang(草鞋没号)]

@spianmo 用 alias 的方式非常的明智 👍，因为它的优先级比 vite-plugin-electron-renderer 要高。

emmm...
我给一段看起来 匪夷所思 的修复代码，别说 vite-plugin-electron-renderer 和 md-editor-v3 冲突，只能说 vite-plugin-electron-renderer 按部就班的把 markdown-it 中依赖的 punycode 当成了 Node.js 内置模块 常规处理，算是一个从根本问题出发解决问题的暴力解决办法 😅。

第一步：改 vite.config.ts 配置

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({/* 配置省略…… */}),
  ],
  resolve: {
    alias: {
      // ---- 修复 punycode 冲突插件 ----
      // 1. 通过 alias 拦截 punycode 模块重定向到 polyfills/punycode.js
      // 2. 重新添加 punycode 的 polyfill - `markdown-it` 中对 `require('punycode')` 的使用有 try-catch 处理，这里放心大胆的 polyfill 即可
      // 3. 创建 polyfills/punycode.js 文件
      punycode: `${__dirname}/polyfills/punycode.js`,
    },
  },
})

第二步：Polyfill punycode

1. 创建 polyfills/punycode.js 文件
2. 粘贴下面的代码

// polyfills/punycode.js
export default {};

修复效果