Vue+TS项目使用Vitest测试时json-big依赖解析失败求助

问题 #

项目正常运行，但执行vitest run时抛出错误，提示无法解析json-big包的入口，认为其package.json的main/module/exports配置存在问题。

已尝试操作：

• 调整Vite配置中Vitest相关选项
• 删除node_modules后重新安装

运行环境：

• Node v16.16.0
• npm v8.17.0
• Linux Mint (Vanessa)

相关配置文件 #

package.json #

{
  "name": "vite-vue-typescript-starter",
  "version": "0.1.4",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build --base /smgreenhousemanager",
    "test": "vitest run --coverage",
    "format": "prettier --write .",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@pixi/math-extras": "^6.4.2",
    "axios": "0.25.0",
    "json-big": "^1.0.2",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
    "pinia": "^2.0.13",
    "pixi-viewport": "^4.34.4",
    "pixi.js": "^6.4.2",
    "pixi.js-keyboard": "^1.1.6",
    "pixi.js-mouse": "^1.1.6",
    "ts-toolbelt": "^9.6.0",
    "uuid": "^8.3.2",
    "vue": "^3.2.26"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.182",
    "@types/node": "^18.6.2",
    "@types/uuid": "^8.3.4",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vitest/coverage-c8": "^0.22.0",
    "@vue/compiler-sfc": "^3.2.23",
    "happy-dom": "^6.0.4",
    "jsdom": "^20.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vitest": "^0.22.0",
    "vue-tsc": "^0.29.8"
  }
}

vite.config.ts #

// https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-
/// <reference types="vitest" />

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import process from "process"

const httpPort: string = process.env.HTTP_PORT || '8069' // This parallels our backend declaration in service.py.
const backendUrl: string = process.env.BACKEND_URL || `localhost:${httpPort}`

export default defineConfig({
    plugins: [vue()],
    define: {
        'BACKEND_URL': `"${backendUrl}"`
    },
    build: {
        target: 'esnext'
    },
    test: {
        environment : "happy-dom"
    }
})

utils.test.ts #

import { expect, test } from 'vitest'
import {Rectangle} from "pixi.js";
import {normaliseRectangleShape} from "../lib/utils";

test('normalised rectangle nominal', () => {
    const rect = new Rectangle(0, 0, 50, 50)
    const normalised = normaliseRectangleShape(rect)

    expect(normalised.x).toBe(0)
    // expect(normalised).toHaveProperty('y', 0)
    // expect(normalised).toHaveProperty('width', 50)
    // expect(normalised).toHaveProperty('height', 50)
})

报错信息 #

/usr/local/bin/npm test

> vite-vue-typescript-starter@0.1.4 test
> vitest run


 RUN  v0.22.0 /home/chuck/PyCharm/smgreenhousemanager

 ❯ frontend/src/tests/utils.test.ts (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  frontend/src/tests/utils.test.ts [ frontend/src/tests/utils.test.ts ]
Error: Failed to resolve entry for package "json-big". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "json-big". The package may have incorrect main/module/exports specified in its package.json.
 ❯ packageEntryFailure node_modules/vite/dist/node/chunks/dep-689425f3.js:40970:11
 ❯ resolvePackageEntry node_modules/vite/dist/node/chunks/dep-689425f3.js:40966:9
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-689425f3.js:40773:20
 ❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-689425f3.js:40581:28
 ❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-689425f3.js:39254:55
 ❯ TransformContext.resolve node_modules/vite/dist/node/chunks/dep-689425f3.js:39028:23
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/dep-689425f3.js:58354:34
 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-689425f3.js:58509:57
 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-689425f3.js:39317:30

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  no tests
  Start at  15:52:06
  Duration  1.11s (setup 0ms, collect 0ms, tests 0ms)


Process finished with exit code 1

解决方案 #

方案1：替换为维护更活跃的json-bigint包 #

json-big包的维护已经停滞，其package.json不符合现代模块解析规范。推荐改用json-bigint，它是前者的活跃分支，API完全兼容：

npm uninstall json-big
npm install json-bigint

之后将项目中所有import JSONBig from 'json-big'替换为import JSONBig from 'json-bigint'即可。

方案2：手动指定json-big的入口路径 #

如果不想更换依赖，可以在vite.config.ts中添加别名，强制指定json-big的入口文件：

export default defineConfig({
  // ...其他原有配置
  resolve: {
    alias: {
      'json-big': 'json-big/lib/json-big.js'
    }
  },
  test: {
    environment : "happy-dom"
  }
})

方案3：升级Vite和Vitest版本 #

当前使用的Vite@2.8.0和Vitest@0.22.0版本较旧，可能存在模块解析的兼容性问题。尝试升级到兼容的新版本：

npm update vite vitest @vitejs/plugin-vue

升级后注意检查配置是否需要调整（比如Vitest的环境配置、类型定义等）。

内容的提问来源于stack exchange，提问作者BinarSkugga