尝试从自定义 react 库导入组件“尝试导入错误：'Button'未从'ui-library'导出（导入为'Button'）”

问：

有时它甚至没有编译并在浏览器上显示错误。 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查 的 render 方法。Home

文件夹和导出结构。

src
 |
 +-- components
 |  | 
 +--+------ Button
 |  |       | 
 |  |       +-- Button.tsx 
 |  |       |
 |  |       +-- index.tsx  //export * from './Button';
 |  |       | 
 |  |       OtherComponent
 |  |       |  
 |  |       +-- Conponent.tsx
 |  |       |          
 |  |       +-- index.tsx
 |  |  
 |  +index.tsx // export * from './Button'
 |  
 +index.tsx // export * from 'components'  

按钮文件

import React, { FC, ReactNode } from 'react';
import { Button as BootstrapButton, ButtonProps } from 'react-bootstrap';

export interface customButtonProps extends ButtonProps {
  children: ReactNode;
  isDropdownMenuButton?: boolean;
};

export const Button: FC<customButtonProps> = ({children, isDropdownMenuButton, ...props}) => (
  <BootstrapButton className={isDropdownMenuButton ? 'btn-dropdown-menu' : ''} {...props}>
    <span className="btn-lines btn-lines--left">
      <span className="btn-lines btn-lines--right">{ children }</span>
      <span className="btn-lines--close"></span>
    </span>
  </BootstrapButton>
);

汇总配置

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { terser } from "rollup-plugin-terser";
import alias from '@rollup/plugin-alias';
import image from '@rollup/plugin-image';

export default [
  {
    input: "src/index.tsx",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      alias({
        // Define an alias for your library path
        entries: [
          {
            find: 'ui-library',
            replacement: './dist/esm'  // Specify the relative path to the dist directory
          }
        ]
      }),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      peerDepsExternal(),
      terser(),
      image()
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
];

tsconfi.json

{
    "compilerOptions": {
      // Default
      "target": "es5",
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "strict": false,
      "skipLibCheck": true,
  
      // Added
      "jsx": "react",
      "module": "ESNext",
      "declaration": true,
      "declarationDir": "types",
      "sourceMap": true,
      "outDir": "dist",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "emitDeclarationOnly": true,
      "rootDir": "src",
  
      // Missing Options from the First Configuration
      "removeComments": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "baseUrl": "./",
      "incremental": true,
      },
    "include": ["src/**/*"]  
}

pcakag.json

{
  "name": "cgpt-ui-library",
  "version": "1.0.1",
  "description": "",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "type": "module",
  "scripts": {
    "rollup": "rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run rollup",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@rollup/plugin-alias": "^5.0.1",
    "@rollup/plugin-commonjs": "^25.0.5",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.5",
    "@storybook/addon-essentials": "^7.4.6",
    "@storybook/addon-interactions": "^7.4.6",
    "@storybook/addon-links": "^7.4.6",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.4.6",
    "@storybook/react": "^7.4.6",
    "@storybook/react-vite": "^7.4.6",
    "@storybook/testing-library": "^0.2.2",
    "@types/react": "^18.2.22",
    "bootstrap": "^5.3.2",
    "chromatic": "^7.2.0",
    "css-loader": "^6.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^4.0.2",
    "rollup-plugin-dts": "^6.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.68.0",
    "storybook": "^7.4.6",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@rollup/plugin-image": "^3.0.3",
    "@types/react": "^18.0.15",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2"
  },
  "peerDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "types": "dist/index.d.ts"
}

作为依赖项安装后在 React 项目中的使用情况

import { Button } from "ui-library";


export default function Home() {

  return (
    <main style={{ background: '#000000' }}>
      <>
<Button >
        Default Button
      </Button>
</>
   </main>
  )
}