如何解决msw报'Package subpath './browser' is not defined'错误？

Question

我新建了一个项目vue3+vite+pnpm+工作空间，我模拟数据使用的是msw，,这个的版本是最新的2.7.3，但是在运行的时候它报 Package subpath './browser' is not defined by "exports" in C:\Users\12770\Desktop\lucky-calm\node_modules\msw\package.json 这个错误，我看了package.json,它是有browser的,
而且我是按照官网来配置的，官网也是这样写的
我看Issues是有这个类似的问题的 https://github.com/mswjs/msw/issues/2208，我查看了许多类似于这个的问题
但是我没太懂他们的解决办法
这是我的项目的大概结构

编辑器是没有报错的，但是一运行就会报这个错误

//config\mock-config\browser\worker.ts

import { setupWorker } from 'msw/browser'
import { handlers } from '../src/handlers'
import {
  //  dirname,
  resolve,
} from 'node:path'
export const worker = setupWorker(...handlers)

export async function setupBrowserWorkerServer() {
  await worker.start({
    serviceWorker: {
      url: `${resolve(process.cwd(), './public')}/mockServiceWorker.js`,
    },
  })
}

我试了不同的node版本

node、pnpm版本号

node版本号	pnpm版本号
22.12.0	10.5.0
20.16.0	10.5.0
18.19.1	9.6.0

所有的package.json所安装的依赖版本都在这儿，

packages:
  - packages/*
  - components/**
  - config/**
  - scripts/*
  - utils/*
  - '!**/test/**'
catalog:
  '@clack/prompts': ^0.9.1
  '@faker-js/faker': ^9.5.0
  '@manypkg/get-packages': ^2.2.2
  '@tsconfig/node22': ^22.0.0
  '@types/node': ^22.9.3
  '@vitejs/plugin-vue': ^5.2.1
  '@vitejs/plugin-vue-jsx': ^4.1.1
  '@vue/eslint-config-prettier': ^10.1.0
  '@vue/eslint-config-typescript': ^14.1.3
  '@vue/tsconfig': ^0.7.0
  axios: ^1.7.9
  cac: ^6.7.14
  eslint: ^9.14.0
  eslint-plugin-vue: ^9.30.0
  execa: ^9.5.2
  find-up: ^7.0.0
  msw: ^2.7.3
  npm-run-all2: ^7.0.1
  pinia: ^2.2.6
  prettier: ^3.3.3
  typescript: ~5.6.3
  unbuild: ^3.0.1
  vite: ^6.0.1
  vite-plugin-vue-devtools: ^7.6.5
  vue: ^3.5.13
  vue-router: ^4.4.5
  vue-tsc: ^2.1.10

我翻译后，按照他们所说的，我的问题并没有解决，依赖提升，vite配置都不管用

我希望我能正常运行这个项目，并且不会报这个错误

上诉问题解决了

上诉问题的根本是我现在想把它集成到vite里面，并且让这段代码运行在浏览器环境，
目前可知vite运行在node环境，但是这段代码运行在浏览器环境，现在就是如何把这两个结合到一块，当vite启动后，把这段代码注入到浏览器环境
如果可以的话求教一下，如果不行的话，我就放弃这个想法了

Answer 1

我看 demo 简单这样调用，你试下简化试试

const worker = setupWorker(...handlers);
worker.start();