Vue3 typescript 在 `npm run dev` 正常运行, `npm run build` 构建时报错 'rewrite' 未在 regex.min.js 中导出?

(补充:这里似乎是 vite 构建前检查的问题,没有最小 .mts 包导致搜索到 .min.js 去了;而 npm run tauri dev 没问题是因为这一步用不到 vite。由于 rewrite 仅在一个地方用到,这里就改了一下 oniguruma-to-js 库中引入 regex 的部分,将 import { rewrite } from 'regex' 改成 import * as regex from 'regex' ,后面改成 regex.rewrite,算是个治标不治本的方法)


以下为问题原文:

(已经问过 AI,试过了都不行)

Vue3 使用 npm 构建,代码风格为 typescript。其中引入了 Shiki 包,在 Shiki 的依赖 oniguruma-to-js 构建时报错。

npm run dev 阶段可以运行,代码功能全部正常;随后进行 npm run build 时出现:

RollupError: "rewrite" is not exported by "node_modules/regex/dist/regex.min.js", imported by "node_modules/oniguruma-to-js/dist/shared/oniguruma-to-js.2969e22d.mjs".

即依赖 regex 没有默认导出 rewrite ,但是报错位置变成了 dist/regex.min.js ,也就是 build 时没有使用 types/regex.d.ts (编辑器中的代码提示是链接到 types/regex.d.ts 的)。检查了 regex 的构建命令:

{
    ...
    "exports": {
    ".": {
      "types": "./types/regex.d.ts",
      "import": "./dist/regex.mjs",
      "require": "./dist/regex.cjs"
    }
  },
  "browser": "./dist/regex.min.js",
  "types": "./types/regex.d.ts",
  "sideEffects": false,
  "scripts": {
    "bundle:global": "esbuild src/regex.js --global-name=Regex --bundle --minify --sourcemap --outfile=dist/regex.min.js",
    "bundle:esm": "esbuild src/regex.js --format=esm --bundle --sourcemap --outfile=dist/regex.mjs",
    "bundle:cjs": "esbuild src/regex.js --format=cjs --bundle --sourcemap --outfile=dist/regex.cjs",
    "types": "tsc src/regex.js --rootDir src --declaration --allowJs --emitDeclarationOnly --outDir types",
    "prebuild": "rm -rf dist/* types/*",
    "build": "npm run bundle:global && npm run bundle:esm && npm run bundle:cjs && npm run types",
    "pretest": "npm run build",
    "test": "jasmine && tsc --project spec/types/tsconfig.test.json",
    "prepare": "npm test"
  },
    ...
}

这一部分应该没问题。按照建议在 tsconfig.jsoncompilerOptions 中修改:

"esModuleInterop": true,

也不生效。

阅读 865
avatarAI BotBETA

这个问题看起来是由于在构建生产版本时,Rollup 打包器未能正确处理 oniguruma-to-js 依赖的模块解析,特别是它尝试从 regex 包中导入一个不存在的 rewrite 导出。尽管在开发模式下一切正常,但在构建过程中可能因为不同的模块解析策略导致问题。

以下是一些可能的解决步骤:

1. 检查 Rollup 配置

确保你的 Rollup 配置文件(通常是 rollup.config.jsvite.config.js,如果你使用的是 Vite)中正确设置了模块解析和插件。特别是,确保 Rollup 能够正确处理 ES Modules 和 CommonJS 模块。

2. 使用插件来解决依赖问题

你可以尝试使用像 @rollup/plugin-commonjs 这样的插件来转换 CommonJS 模块到 ES Modules,如果 regex 包在构建过程中以 CommonJS 形式被引入。

// rollup.config.js
import commonjs from '@rollup/plugin-commonjs';

export default {
  // ...
  plugins: [
    commonjs({
      include: 'node_modules/**',
    }),
    // 其他插件
  ],
  // ...
};

3. 检查 node_modules 和依赖版本

有时候,node_modules 文件夹中的依赖可能会损坏或不完整。尝试删除 node_modules 文件夹和 package-lock.jsonyarn.lock 文件,然后重新运行 npm installyarn 来重新安装依赖。

4. 更新依赖

确保所有相关的依赖都是最新的,特别是 oniguruma-to-jsregex。可以通过运行 npm update 或手动更改 package.json 中的版本号并重新安装来更新依赖。

5. 检查 TypeScript 配置

尽管你已经设置了 esModuleInterop,但确保其他 TypeScript 配置也正确无误。特别是,检查 moduleResolutionallowSyntheticDefaultImports 是否设置得当。

6. 调试 Rollup 打包过程

如果问题仍然存在,你可以尝试在 Rollup 打包过程中添加更详细的日志记录或调试信息,以查看是哪个步骤导致了问题。

7. 查找相似的问题和解决方案

在 GitHub、Stack Overflow 或其他开发者社区中搜索是否有其他开发者遇到并解决了类似的问题。

结论

这个问题通常与模块解析和打包配置有关。通过检查和调整这些配置,你应该能够解决 npm run build 时出现的 rewrite 导出错误。如果问题依旧存在,可能需要更深入地查看 oniguruma-to-jsregex 的源代码或寻求来自这些包的开发者的帮助。

1 个回答

你的问题是由于依赖包之间的导出不兼容导致的。

确保oniguruma-to-jsregex的版本是最新的:

npm update oniguruma-to-js regex

尝试直接从regex导入所需的功能,而不是从regex.min.js

import { regex } from 'regex';

如果使用了Rollup打包,在Rollup配置中添加内容,确保正确处理模块导入:

export default {
  ...
  plugins: [
    ...
    commonjs({
      include: /node_modules/,
    }),
    ...
  ],
};

确保tsconfig.json包含以下设置,支持ES模块和默认导入:

{
  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    ...
  }
}

清理并重建项目,删除node_modules文件夹和package-lock.json文件,然后重新安装依赖:

rm -rf node_modules package-lock.json
npm install

你可以考虑查看日志:

npm run build -- --verbose

或者逐步注释代码行,非常好用,找出导致构建失败的代码行。

推荐问题
logo
Microsoft
子站问答
访问
宣传栏