search

lisonge / vite-plugin-monkey

A vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat
MIT License
1.35k stars 71 forks source link

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

Closed lcandy2 closed 6 months ago

lcandy2 commented 6 months ago

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

CleanShot 2024-03-11 at 11 26 35@2x

CleanShot 2024-03-11 at 11 27 36@2x

CleanShot 2024-03-11 at 11 36 41@2x

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

lisonge commented 6 months ago

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

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

lcandy2 commented 6 months ago

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

lisonge commented 6 months ago 
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 commented 6 months ago

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

CleanShot 2024-03-11 at 16 49 42@2x

lisonge commented 6 months ago

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

lcandy2 commented 6 months ago

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.