React TS+Rollup打包组件模块出现导出缺失错误求助

针对你遇到的export 'default' was not found in 'react-module' (module has no exports)错误，按以下步骤排查修复：

1. 修正package.json的入口配置 #

确保package.json中指定了正确的构建产物入口，同时兼容ES和CommonJS模块：

{
  "name": "react-accordion-animated",
  "main": "./dist/index.cjs.js", // CommonJS入口
  "module": "./dist/index.js", // ES模块入口
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.cjs.js"
    }
  },
  "types": "./dist/index.d.ts" // 可选，TS项目需要类型声明
}

2. 调整Rollup配置 #

确保Rollup正确输出模块格式，保留导出，同时排除React依赖：

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.tsx',
  output: [
    // 输出ES模块
    {
      file: 'dist/index.js',
      format: 'es',
      sourcemap: true
    },
    // 输出CommonJS模块
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true
    }
  ],
  plugins: [
    nodeResolve(),
    typescript({ tsconfig: './tsconfig.json' }),
    babel({
      extensions: ['.ts', '.tsx'],
      presets: ['@babel/preset-react', '@babel/preset-typescript'],
      babelHelpers: 'bundled'
    }),
    postcss({
      inject: true, // 自动注入样式到组件
      extract: false // 或者设为true生成单独css文件
    })
  ],
  external: ['react', 'react-dom'] // 避免打包React到组件内
};

3. 检查TypeScript配置 #

确保TS配置正确生成模块和类型声明：

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

4. 确认组件导出逻辑 #

任选一种导出方式，确保代码无冲突：

• 默认导出：

// src/index.tsx
import './index.css';

interface AccordionProps {
  faqs: Array<{ question: string; answer: string }>;
}

const Accordion = ({ faqs }: AccordionProps) => {
  // 组件实现逻辑
  return (
    <div className="accordion-container">
      {/* 渲染折叠面板 */}
    </div>
  );
};

export default Accordion;

• 命名导出：

// src/index.tsx
import './index.css';

interface AccordionProps {
  faqs: Array<{ question: string; answer: string }>;
}

export const Accordion = ({ faqs }: AccordionProps) => {
  // 组件实现逻辑
  return (
    <div className="accordion-container">
      {/* 渲染折叠面板 */}
    </div>
  );
};

5. 清理缓存并重新构建 #

1. 删除旧构建产物：rm -rf dist
2. 重新打包：rollup -c
3. 测试项目中重新链接组件：

   npm unlink react-accordion-animated
   npm link react-accordion-animated
   

4. 重启测试项目的开发服务器

6. 验证构建产物 #

打开dist/index.js（或dist/index.cjs.js），确认文件末尾存在正确的导出语句：

• ES模块：export default Accordion; 或 export { Accordion };
• CommonJS模块：module.exports = Accordion; 或 exports.Accordion = Accordion;

如果构建产物中没有导出语句，说明Rollup配置存在错误，需检查是否有插件压制了导出。

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