自定义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注册表并使用，它将按预期工作。