创建自定义反应包库
Boa*_*rdy 5 package reactjs next.js
我第一次尝试创建一个库包，但遇到了一个问题，虽然一切都编译得很好，但在加载页面时它说无法在库中找到我的组件的模块。
在我的图书馆项目中，我有以下目录结构
在我的 SayHello.jsx 文件中，我有以下内容：
import * as React from 'react';
const SayHello = (props) => {
return (
<h1>Hello ${props.name}</h1>
)
}
export {SayHello}
在我的 babel.config.js 中，我有以下内容：
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
],
"@babel/preset-react"
]
}
在我使用这个库的主应用程序中，我已将项目添加到 NPM 中（从 GitHub 托管它，而不是 NPM 包管理器作为其私有库）
我将该组件导入到我的主应用程序中并按如下方式使用它：
import SayHello from 'devso-react-library'
...
<SayHello name={'chris'} />
在 lib 目录中的 index.js 中，我有以下内容：
import SayHello from "./components/SayHello";
export {
SayHello
}
VS Code 中的所有内容似乎都意味着它可以找到所有内容，但是当我转到该页面时，出现以下错误：
./node_modules/devso-react-library/dist/index.js:13:0
Module not found: Can't resolve '../../lib/component/SayHello'
Import trace for requested module:
./pages/products-and-services.tsx
https://nextjs.org/docs/messages/module-not-found
其pages/products-and-services.tsx情况如下：
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import { useState } from 'react'
import ContentWrapper from '../components/StandardComponents/ContentWrapper'
import Footer from '../components/StandardComponents/Footer'
import TopNav from '../components/StandardComponents/TopNav'
import SayHello from 'devso-react-library'
const Home: NextPage = () => {
return (
<div className='flex flex-col h-screen'>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<TopNav />
<ContentWrapper>
<button>Show Modal</button>
<SayHello name={'chris'} />
</ContentWrapper>
<Footer />
</div>
)
}
export default Home
我不明白为什么它在 lib/components 而不是 lib/components 中查找，如果需要包含任何其他文件，请告诉我，第一次尝试这个，所以我认为我已经包含了所有相关的内容。
这是一个作为主应用程序的 NextJS 项目，但该库使用 create-react-app 作为模板。
更新
我尝试import SayHello from "devso-react-library' to 按照评论中的建议更改 import { SayHello } from "devso-react-library" 的导入，现在出现了不同的错误，如下所示：
/node_modules/devso-react-library/dist/components/SayHello.js:3:0 找不到模块：无法解析“core-js/modules/web.dom-collections.iterator.js”
我似乎已经让它工作了，尽管看起来不太正确。我必须安装core-js到库包中，然后将导入更改为 dist 文件夹中我想要的组件的路径，例如
import { SayHello} from 'devso-react-library/dist/components/SayHello'