首先检查React项目和Formcomponent库是否使用了React和React Bootstrap的兼容版本。不匹配的版本可能会导致像Invalid hook call这样的错误。
在你的项目中，查看package.json文件以找到你正在使用的React版本。它将列在dependencies部分下，例如，

"dependencies": {
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    ...
}

类似地，在Formcomponent包中，查看其package.json文件以查找它使用的React版本，例如，

"dependencies": {
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.0",
    ...
}

比较版本号以查看它们是否匹配。如果存在差异，可能会导致问题。
在Formcomponent包中将React和React Bootstrap Decrypt为peer dependencies，以避免重复安装。这告诉你的库的消费者他们应该使用哪个版本的React和React Bootstrap，而不需要将它们包含在你的库包中。

"peerDependencies": {
  "react": "^18.2.0",
  "react-bootstrap": "^2.9.0"
}

您还可以运行npm ls react或yarn list react命令（取决于您使用的是npm还是yarn）。
此命令将列出项目中所有已安装的React版本以及它们的使用位置。
注意：项目中Formcomponent的import语句与Formcomponent包中的export语句不匹配。import语句是import { Formcomponent } from "@sineverba/form-component";，但在你的项目中，你试图将它用作<FormComponent name="ciao" />，而应该是<Formcomponent name="ciao" />（区分大小写）。
在开发过程中，考虑使用npm link或yarn link链接到本地Formcomponent包，而不是使用package.json中的文件路径。这将允许您在更真实的环境中测试库，类似于发布时的使用方式。
我从我的组件中导出了一个简单的input标记，它可以工作。
可能是从另一个组件导入的React Bootstrap库的一些奇怪错误。
如果导出一个简单的HTML input标签可以工作，但从React Bootstrap导出一个组件却不行，这表明React Bootstrap在Formcomponent包中的使用或集成可能存在问题。
如果React Bootstrap还没有在Formcomponent包中声明为对等依赖，那么这样做会很好。这样，Formcomponent将使用安装在消费项目中的React Bootstrap版本，这有助于避免版本冲突和重复依赖。

"peerDependencies": {
    "react-bootstrap": "^version"
}

并确保React Bootstrap组件在Formcomponent包中正确导入。仔细检查import语句，并将其与React Bootstrap的文档进行比较，以确保准确性。
查看控制台中提供的特定错误消息和堆栈跟踪，以查明错误的来源。这可以提供一些线索，说明使用React Bootstrap组件时会出现什么问题。

在您的Formcomponent.tsx中，从react-bootstrap导入Form和FormLabel并相应地使用它们：
tsx：

import React from 'react';
import { Form, FormControl, FormGroup } from 'react-bootstrap';

interface FormcomponentProps {
  name: string;
}

export const Formcomponent = ({ name }: FormcomponentProps) => {
  return (
    <FormGroup controlId={name}>
      <Form.Label>{name}</Form.Label>
      <FormControl type="text" name={name} />
    </FormGroup>
  );
};

当我创建一个包并尝试使用它时，我曾经像你一样遇到过这个问题。这是因为react声明在package.json中，你需要把它放在Formcomponent中的peerDependencies中，而不是dependencies或devDependencies package.json中。是因为你将有另一个副本的React在您的应用程序中，导致error

"peerDependencies": {
    "react": "^18.2.0"
 }

这与项目加载两个React示例有关。
虽然目前大多数其他答案似乎都归咎于版本不匹配，但我认为这实际上是软件包解析的问题。
假设你正在观看两个不同的版本：
1.项目-这是你的入口点应用程序。
1.表单库-这是您在本地创建的可重用包。
这两个构建都将具有“/node_modules/react”。
当在package.json中使用“file：“来安装一个包时，它会在node_modules中创建一个链接，指向包的原始位置（开发位置）（Form Library）。
这意味着当您的项目构建解析包时，它将找到表单库的node_modules文件夹，并将其用作其包解析的一部分。
在解析包时，优先级顺序为：别名>本地节点模块>根节点模块。
这对你的项目意味着什么，当它为位于你的表单库中的文件解析包时，它将从“表单库/节点模块”中解析，如果它没有找到包，它将检查“项目/节点模块”。
这就是给你两个版本的React的原因：

1. Project/node_modules/react
2. Project/node_modules/Form Library/node_modules/react
   如果你使用任何捆绑的包分析器，你应该能够看到两个React示例被包括在内。
   为了解决这个问题，你可以同时开发你的Project和Form Library，你可以在你的构建中添加一个别名，并强制它将React解析为Project/node_modules/react。
   Webpack别名-https://webpack.js.org/configuration/resolve/#resolvealias
   ViteJs别名-https://vitejs.dev/config/shared-options.html#resolve-alias
   注意：任何共享的、具有单例或类似的包都需要别名，以避免问题。
   ViteJs Super Heavy Handed Example -项目配置：

// vite.config.ts
import react from '@vitejs/plugin-react-swc';
import Checker from 'vite-plugin-checker';
import { resolve } from 'path';
import { UserConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
const fs = require('fs-extra');

const shouldAnalyze = process.env.ANALYZE;

// Load Project package.json file.
let rawdata = fs.readFileSync('./package.json');

// parse as object.
let packageJson: any = JSON.parse(rawdata);

const resolveNodeModules: any[] = [];

// read through package.json file and create aliases for each dependency.
if (packageJson?.dependencies) {
    Object.keys(packageJson.dependencies).forEach(key => {
        resolveNodeModules.push({
            find: key,
            replacement: pathResolve('node_modules') + '/' + key
        });
    })
}

// read through package.json file and create aliases for each devDependency.
if (packageJson?.devDependencies) {
    Object.keys(packageJson.devDependencies).forEach(key => {
        resolveNodeModules.push({
            find: key,
            replacement: pathResolve('node_modules') + '/' + key
        });
    })
}

const config: UserConfig = {
    resolve: {
        alias: [
            {
                find: /@\//,
                replacement: pathResolve('src') + '/'
            },
            // add all previously created aliases from package.json to the build.
            ...resolveNodeModules
        ]
    },
    build: {
        modulePreload: {
            polyfill: false
        },
        rollupOptions: {
            plugins: !!shouldAnalyze ? [visualizer({ open: true, filename: './bundle-size/bundle.html' })] : [],
        },
        sourcemap: !!shouldAnalyze
    },
    define: {
        'process.env': process.env
    },
    plugins: [
        react({ 
        }),
        Checker({
            typescript: true,
            overlay: true
        })
    ]
}

const getConfig = () => config

export default getConfig