Uncaught TypeError: hmrClient.dataMap.has is not a function

[lcandy2]

Uncaught TypeError: hmrClient.dataMap.has is not a function at new HMRContext (hmr.ts:41:28) at createHotContext (client.ts:425:10) at app.css:1:96

这是create monkey的模板，仅修改vite config中的match内容，编译安装后问题解决，但无法dev调试。

[lisonge]

Uncaught TypeError: hmrClient.dataMap.has is not a function

应该是你的宿主网站的有一个叫 Map 的全局函数占用了引用，导致 vite 这边使用的不是 js 原生的 Map 而报错

[lcandy2]

这个宿主网站是学习通🤣，这种情况下，有没有什么好的dev方法，还是只能build

[lisonge]

import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';

export default defineConfig({
  plugins: [
    {
      name: 'force-polyfill',
      apply: 'serve',
      transform(code, id, options) {
        if (id.includes('core-js-pure')) return;
        if (code.includes('Map(')) {
          // pnpm add core-js-pure
          return code + '\n' + `import Map from 'core-js-pure/actual/map';`;
        }
      },
    },
    monkey({
      entry: 'src/main.tsx',
      userscript: {
        icon: 'https://vitejs.dev/logo.svg',
        namespace: 'npm/vite-plugin-monkey',
        match: ['https://www.google.com/'],
      },
    }),
  ],
});

你可以使用上面简单的插件来强制覆盖引用标识，但是这个只是简单的处理

如果源代码本来就有类似 const Map = xxx 就会报错，这时候可以简单过滤 id 直接 return

[lcandy2]

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/core-js-pure@3.36.0/node_modules/core-js-pure/actual/map/index.js?v=7206e10d' does not provide an export named 'default' 可通过改为import 'core-js-pure/actual/map';来解决，但出现了新的问题

Uncaught ReferenceError: require is not defined at index.js?v=7206e10d:2:14

[lisonge]

你可以搜索如何在 vite 里使用 cjs 优化依赖解决

[lcandy2]

I searched for core-js issues about how to use core-js as cjs in a type module, and one of the replies mentioned the simplest option, "Use Githubissues.

Githubissues is a development platform for aggregating issues.