You are loading the ES modules build of React Router on a page that is already running the CommonJS build...

报错原因都写了啊，你在 commonjs 环境中引入了 ESM 的包，所以报错啊。
然后像 react 、react-dom 、react-router-dom 这种包就不要放到 dependencies 里了，放 peerDependencies 里吧。

做 lib 的时候 这些东西要尽量放到 peerDeps 然后如果要打包 需要 external

另外就是 jest 的问题 主要是 jest 是用 nodejs 跑的 所以引入一些 esm 的包就会出现问题 可能需要转译一下才能跑

@duan602728596 thx


@yyfearth 我们的 nodejs 已经是 14+ 版本了，应该可以支持 esm 了啊。
你说的转译是什么意思？是类似于 babel 么？不清楚怎么操作，有没有可以用于搜索的关键字或者文档？
谢谢

可以统一 jest 执行时，第三方依赖的模块规范选择。自定义一个 jest resolver

// build/resolver.js

const fs = require('fs')
const path = require('path')
const resolve = require('resolve')

function mapModuleFieldToMain (pkg, pkgDir) {
const moduleSrcPath = pkg.module
const isModuleFieldAvailable = moduleSrcPath &&
fs.existsSync(path.resolve(pkgDir, moduleSrcPath))

if (isModuleFieldAvailable) {
return Object.assign({ }, pkg, { main: moduleSrcPath })
}
return pkg
}

function defaultResolver (pathStr, options) {
return resolve.sync(pathStr, {
basedir: options.basedir,
extensions: options.extensions,
moduleDirectory: options.moduleDirectory,
paths: options.paths,
packageFilter: mapModuleFieldToMain
})
}

module.exports = defaultResolver

--------------------

// jest.config.js

// A path to a custom resolver
// 自定义一个 resolver ，优先读取依赖的 esm 入口。和 rollup 对齐
resolver: '<rootDir>/build/resolver.js'


---------

我之前先过一个 SDK 的脚手架工具，生成的 SDK 模板代码里用到了类似的逻辑 https://github.com/draftbookJs/cli 。不知道你碰到的是不是这种问题

@yazoox 转译就是指的 babel(或者 tsc) 因为 jest 是直接在 node 上面跑 所以一般情况下需要用 babel/tsc
但是 babel/tsc 一般只管 src 一般会把 node_modules 排除在外 这样就算用 node 14+ 也可能会碰到加载 esm 导致无法运行的问题

@qqqqqcy cjs 和 esm 的加载方式不一样 不用 babel 的话 node 14+ 自己能够处理好 esm 入口吗？

@yyfearth 我用的 preset: 'ts-jest/presets/js-with-ts-esm'。可以处理 ts 和 esm

@qqqqqcy 估计是 ts-jest 自动处理了
ts-jest 有 tsc 作为转译工具 和 babel 差不多

我也在单元测试中遇到这个问题了= - =