如何正确配置JSX组件的npm包？ESM兼容问题求助

当前包的配置与结构 #

• package.json核心配置：

"main": "src/index.js",
"type": "module",

• 入口文件src/index.js负责批量导出组件：

export { default as Accordion } from './components/Accordion/index.jsx';
export { default as Alert } from './components/Alert/index.jsx';
export { default as BackToTop } from './components/BackToTop/index.jsx';
...

• 组件均为默认导出的React函数组件，示例：

import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import cn from 'classnames';

export default function Alert() {
...
}

遇到的具体问题 #

1. 正式npm包安装后的导出错误
   本地通过"@mycompany/mypackage": "file:../mypackage"安装到Vite项目时可正常导入使用（import {Alert} from '@mycompany/mypackage'），但发布为正式npm包后，出现以下错误：

prop-types does not provide an export named 'default'

尝试将自身组件的PropTypes导入改为import * as PropTypes from 'prop-types';，但因react-transition-group也依赖PropTypes，问题仍未解决。

2. Next.js兼容性限制
   在Next.js项目中，必须将该包加入transpilePackages配置才能正常使用。

3. Babel转译后的ESM扩展名问题
   使用Babel转译代码后，组件间的本地导入仍保留.jsx后缀（如import {Alert} from '../Alert/index.jsx'），不符合ESM标准中导入必须带正确扩展名的要求，此问题无法解决。

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