更新汇总后的 React 组件库问题(React.jsx:类型无效......

Problem with React component library after updating rollup ( React.jsx: type is invalid ...)

提问人:NotX 提问时间:11/30/2022 最后编辑:NotX 更新时间:12/1/2022 访问量:343

问:

更新汇总到我的 React 组件库后不再起作用。我的主项目中使用的任何库组件都会导致错误:2.70.13.5.0

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at MyLibraryComponent
    at ...

以及后续问题。当我将这个组件直接复制到我的主项目中时,它工作得很好。

我的主要项目是基于 cjs 的,我的组件库也是如此。

TypeScript 声明看起来不错,例如:@my-react-component-library/dist/index.d.ts

declare const MyLibraryComponent: React.FC<Props$a>;

,等等:@my-react-component-library/dist/cjs/index.js

var MyLibraryComponent = function (_a) {
    ...
    return (jsxRuntime.jsx(material.Box, __assign({ style: {...} }, { children: ...) })));
};

看起来像这样:rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve"; //15.0.1 
import commonjs from "@rollup/plugin-commonjs"; //23.0.3
import typescript from "@rollup/plugin-typescript"; //10.0.1
import excludeDependenciesFromBundle from "rollup-plugin-peer-deps-external"; //1.1.23
import postcss from "rollup-plugin-postcss"; //4.0.2
import image from "@rollup/plugin-image"; //3.0.1
import dts from "rollup-plugin-dts"; //5.0.0
import copy from "rollup-plugin-copy"; //3.4.0

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: 'dist/cjs/index.js',
        format: "cjs",
        sourcemap: true,
      },
      {
        file: "dist/esm/index.js",
        format: "esm",
        sourcemap: true
      }
    ],
    plugins: [
      excludeDependenciesFromBundle({dependencies:true, peerDependencies:true}),
      resolve({ rootDir: "src" }),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      image(),
      postcss(),
      copy({
        targets: [{ src: "public/", dest: "dist/" }]
      })
    ],
    context: "this"
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    external: [/\.css$/],
    plugins: [dts()]
  }
];

我很感激我错过的任何想法!

JavaScript ReactJS TypeScript 汇总

评论

0赞 Cleanshooter 6/30/2023
我遇到了完全相同的问题。几天来一直在进行故障排除。你有没有想过什么?
0赞 NotX 7/1/2023
@Cleanshooter 不完全是。我放弃了它,并将组件库迁移回了主项目。

答: 暂无答案