无法将JSX/TSX组件从另一个React应用程序导入到我的主React应用程序

Question

我有一个相当复杂的设置两个反应应用程序。

上下文：

我的任务是创建一个使用ReactJS的设计系统，稍后在他们的主要应用程序中使用。因此，我在一周内做了一个设计系统(ReactJS方面的小知识；主要是一个Vue dev)，在他们的最新版本中使用了NextJS + TailwindCSS 3 + TypeScript。

现在，我在本地下载了他们的主要React，而不是打字本，所有的软件包都已经过时了，已经使用了node 6和app 16.13。因此，我将它们更新到节点16，并与其他包一起响应17。

而且，主应用程序不使用功能组件，而我的应用程序使用功能组件。

问题：

现在的问题是如何连接这两个应用程序？主要应用程序(非TS)和我的设计系统(TS与NextJS)，以便我可以使用我的设计系统组件在他们的应用？

到目前为止我试图做的事情：

我使用npm-link将我的设计系统npm链接到主应用程序。链接是成功的，但是主应用程序找不到我的tsx文件。

还试着用next build来构建我的设计系统应用程序。

我尝试了两种进口方式：

导入TSX组件的

我试图通过import SearchBar from "design-system/components/SearchBar";导入，但遇到了错误Module not found: Error: Can't resolve。

导入JSX组件的

尝试从我的设计系统导入一个Test jsx组件，但遇到了以下错误：

Module parse failed: Unexpected token (4:9)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| 
| export default function Test() {
>   return <div>TEST COMPONENT FROM JS</div>;
| }
| 

Notes

• 还注意到，设计系统使用功能组件，而主应用程序不使用。

• I给人的印象是，我可以在设计系统中使用任何框架，而不管应用程序是否有TS，因为它将是一个npm包，即使还没有发布，只要有反应就可以导入它并在任何地方使用它。

• 主应用程序由react-scripts创建；设计系统由create next-app --typescript

创建。

这是我的设计系统应用程序的ts.config.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "."
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "."],
  "exclude": ["node_modules"],
  "moduleResolution": ["node_modules", ".next", "node"]
}

我应该采取什么步骤？

• 是否应该调整我的设计系统以使用基于类的组件，而不是使用JSX？
• ，我可以在主应用程序上做些什么来从另一个反应节点应用中导入JSX或最好的TSX文件？
• 是应该做一个新的create-react-app，还是从零开始而不用NextJS来设计系统？我的组件中并不真正需要NextJS。

Answer 1

因此，几天来，我已经了解到，我正在建设的是反应“库”和反应应用程序。

库部分很重要，因为您需要使用一些特定的绑定器，比如Rollup，而不是Vite、Parcel等.而且不需要使用create-react-app，因为它是一个用于创建React的高级抽象。

如果你有同样的问题：

• 不使用create或NextJS
• ，使用适合捆绑组件的绑定器，例如，将组件捆绑在一起，以生产CommonJS和ESModules。这方面有大量的教程。
• 您可以使用桶装出口

。