如何解决自定义NPM组件中反冲的使用
我正在尝试在自定义npm组件中使用反冲,以便可以在应用程序中发布和使用它,但是在使用时出现如下错误:
Invalid hook call. Hooks can only be called inside of the body of a function component...
> const useStoreRef = () => useContext(AppContext);
我正在使用以下 rollupjs 构建软件包:
rollup.config.js
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import postcssImport from "postcss-import";
import packageJSON from "./package.json";
const input = "./src/index.js";
const PLUGINS = [
babel({
exclude: "node_modules/**",}),external(),resolve({
jsnext: true,main: true,browser: true,commonjs(),postcss({
plugins: [postcssImport()],];
export default [
// CommonJS
{
input,output: {
file: packageJSON.main,format: "cjs",sourcemap: true,},plugins: PLUGINS,];
.babelrc
{
"presets": ["@babel/preset-env","@babel/preset-react"],"plugins": ["@babel/plugin-proposal-class-properties"]
}
src / index.js
import React,{ useEffect,useState,useCallback } from "react";
import { useRecoilState,useSetRecoilState } from "recoil";
import {atomState} from '../recoil/atom';
const Component = () => {
const [state,setState] = useRecoilState(atomState);
...
...
return <div>
...
{state}
...
</div>
}
在应用程序中,已发布的组件的用法如下:
App.js
import {Component} from "NPM_PACKAGE_NAME";
import {RecoilRoot} from "recoil";
<RecoilRoot>
<Component />
</RecoilRoot>
请帮助解决此问题。我是 反冲js 的新手。预先感谢。
注意:我正在使用yarn link
来使用程序包
解决方法
我看到了一些关于GitHub的问题。显然,仅当您使用yarn link
在应用程序中使用包时,此问题才存在。如果我要发布到npm注册表并使用,它将按预期工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。