vite 运行时，修改mock文件会生成很多个xxx.mjs文件

[imoxuan]

问题描述：

1. 新建了mock文件,mock/index.ts，编写内容，启动项目 "dev": "vite",
2. 这时候项目是启动着的，这个时候去修改 mock/index.ts，控制台不停的报错误， 而且，mock目录下会生成很多文件

This error came from the "onLoad" callback registered here:

    node_modules/bundle-require/dist/index.cjs:145:10:
onLoad({ filter: JS_EXT_RE }, async (args) => {
          ╵

  This error came from the "onLoad" callback registered here:

    node_modules/bundle-require/dist/index.cjs:145:10:
      145 │       ctx.~~~~~~

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

onLoad~~~~~~({ filter: JS_EXT_RE }, async (args) => {
          ╵           ~~~~~~

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

onLoad

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

~~~~~~

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

({ filter: JS_EXT_RE }, async (args) => {
          ╵           ({ filter: JS_EXT_RE }, async (args) => {
          ╵           ({ filter: JS_EXT_RE }, async (args) => {
          ╵           ~~~~~~

    at setup (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:145:11)
    at handlePlugins (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:1279:21)
    at buildOrContextImpl (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:968:5)
    at Object.buildOrContext (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:776:5)
    at D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2163:15
    at new Promise (<anonymous>)
    at Object.build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2162:25)
    at build (D:\coding\demo-pro\demo\node_modules\esbuild\lib\main.js:2011:51)
    at run (D:\coding\demo-pro\demo\node_modules\bundle-require\dist\index.cjs:225:55)

生成的多余的文件：

系统： win10 home

项目依赖： ├── @rushstack/eslint-patch@1.2.0 ├── @types/node@18.15.11 ├── @types/nprogress@0.2.0 ├── @vitejs/plugin-vue-jsx@3.0.1 ├── @vitejs/plugin-vue@4.1.0 ├── @vue/eslint-config-prettier@7.1.0 ├── @vue/eslint-config-typescript@11.0.2 ├── @vue/tsconfig@0.1.3 ├── axios@1.3.4 ├── cesium@1.103.0 ├── element-plus@2.3.2 ├── eslint-plugin-vue@9.10.0 ├── eslint@8.37.0 ├── mockjs@1.1.0 ├── npm-run-all@4.1.5 ├── nprogress@0.2.0 ├── pinia@2.0.33 ├── prettier@2.8.7 ├── sass@1.60.0 ├── typescript@4.8.4 ├── vite-plugin-cesium@1.2.22 ├── vite-plugin-mock@3.0.0 ├── vite@4.2.1 ├── vue-router@4.1.6 ├── vue-tsc@1.2.0 └── vue@3.2.47

vite.config.js 配置

export default defineConfig({
  plugins: [vue(), vueJsx(), cesium(), viteMockServe()]，
  server: {
    port: devPort,
    open: false,
    cors: true,
    hmr: true
  }
  ... 
})

mock 文件 mock/index.ts

import type { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/getStatusList',
    method: 'get',
    response: () => {
      return {
        code: 200,
        success: false,
        msg: '操作频繁',
        data: {
          userName: 'good',
          age: 20
        }
      }
    }
  }
] as MockMethod[]

[hooray]

same issue

[1215823754i]

npm uninstall vite-plugin-mock npm install vite-plugin-mock@2.9.6 3.0.0有问题 稳定版本选择2.9.6

[halely]

npm uninstall vite-plugin-mock npm install vite-plugin-mock@2.9.6 3.0.0有问题 稳定版本选择2.9.6

我也是这样，但是我使用了2.9.6版本也报错了，提示我：warning: "import.meta" is not available in the configured target environment ("es2015") and will be empty （很头大）

[mjx666]

这个问题现在有解决吗。2.9.6 会报各种node错误和es错误，3.0.0又不稳定，会生成mjs文件

[sir-ran]

同样的问题，生成了一大堆。。。。。坑

[mayong43111]

同样的问题。

[xiblying]

+1

[cnbase]

@imoxuan 临时解决方案： 关闭监听文件内容更改, watchFiles 设置为 false

viteMockServe({
        mockPath: process.cwd() + sep + 'admin' + sep + 'mock',
        enable: process.env.NODE_ENV === 'development',
        logger: false,
        watchFiles: false,
    })

[deppblue]

2.9.8版本可解决该问题 亲测有效

[cjq02]

3.0.0 这么大的bug，居然三个月了还没修复更新

[zhfhai]

现在10月都快解束了，还没有解决

[condorheroblog]

3.0.0 这么大的bug，居然三个月了还没修复更新

我来给大家讲讲是为什么，这是一个死循环的故事。

1. 当你修改 mock 文件夹里面的文件，比如文件的删除、创建、修改
2. 此时触发 vite-plugin-mock 的 watcher，它是通过 all 事件来监听 mock 文件夹
3. vite-plugin-mock 开始用 bundle-require 来读取 mock 文件夹里面文件的内容
4. bundle-require 读取文件内容时，会创建临时文件读取之后删除这个临时文件，假如你修改的是 index.ts，就会创建一个index.bundled_ixha6c2jcd.mjs，读取完之后删除这个临时文件。
5. 对临时文件的操作，会触发第一个步骤，然后一直执行 1、2、3、4、5……，mock 文件夹下就会创建无限多的 mjs 文件

为了解决这个问题，我想到以下办法：

1. 更改 watcher 监听的策略，我们只监听 mock 文件夹里面的 xxx.mock.{ts,js,mjs}，这样就避免和 bundle-require 生成的临时文件有冲突了。
2. 更改 bundle-require 的源码，让生成的临时不在 vite-plugin-mock 的 watcher 中。
3. 不使用 bundle-require，这样就不会有临时文件了，可以使用 import-from-string 来替代。

vite-plugin-fake-server 2.0 版本在对以上办法进行实践。

---

2023 年 12 月 22 日，采用上面的策略之后，目前 vite-plugin-fake-server 2.0 运行良好，并未发现 bug。