`从本地包导入组件时调度程序为空`

Question

我正在使用一个 monorepo，我想在其中创建一个文件夹，其中包含所有这些小功能以及该 monorepo 使用的所有单独项目的组件。

我想，最好的方法是在 monorepo 中创建一个节点模块并让它导出那些常见的函数和组件。

现在，当我尝试使用从该“公共”子项目导出的组件时，我收到如下消息：

dispatcher is null
useState@http://localhost:3000/static/js/bundle.js:162692:7
$@http://localhost:3000/static/js/bundle.js:158032:34
renderWithHooks@http://localhost:3000/static/js/bundle.js:114086:31
...

我创建了以下设置：

common/
  lib/
    components/
      Tooltip/
        index.tsx
    helpers/
      API.ts
      DATETIME.ts
      ...
  index.ts
  ...configs

---

索引.ts

import Tooltip from './components/Tooltip';

export * from './helpers/API';
export * from './helpers/DATETIME';
...

export const COMP = {
  Tooltip: Tooltip
  ...
}

注意： 包装到该 const 对象中是为了随着该库的增长而方便组织。

---

工具提示/index.jsx

import {FC, ReactElement, cloneElement, useState} from 'react';

export interface ITooltipProps {
  children: ReactElement<any, string>,
  anchor: ReactElement<any, string>
}

const Tooltip: FC<ITooltipProps> = (props: ITooltipProps) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className='tooltip-wrapper' style={{
      position: 'relative',
      display: 'inline-block'
    }}
      onClick={() => setIsOpen(true)}
      onMouseOver={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      {cloneElement(props.anchor, {className: 'tooltip-anchor'})}
      <div style={{
        visibility: isOpen ? 'visible' : 'hidden',
        zIndex: 10,
        top: '100%',
        left: '50%',
        opacity: isOpen ? 1 : 0,
        transition: 'all ease-in-out 0.3s'
      }}>
        {props.children}
      </div>
    </div>
  )
}

export default Tooltip;

注意：我知道这个“工具提示”现在非常愚蠢，但它只是作为一个占位符来解决这个组件在单独的包中的问题。

---

package.json

...
  "main": "dist/index.js",
  "directories": {
    "lib": "lib"
  },
  "scripts": {
    "build": "tsup",
    "ladle": "ladle serve --stories=lib/components/**/*.stories.tsx"
  },
  "devDependencies": {
    "@ladle/react": "^4.0.2",
    "@types/react": "^18.2.63",
    "tsup": "^8.0.2",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "buffer": "^6.0.3"
  },
  "peerDependencies": {
    "buffer": "^6.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

---

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    "lib": [ "esnext", "dom" ],
    "jsx": "react-jsx",
    "sourceMap": true,
    "moduleResolution": "node",
    "preserveConstEnums": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true
  }
}

---

tsup.config.json

{
  "splitting": true,
  "sourcemap": true,
  "clean": true,
  "minify": true,
  "dts": true,
  "entry": [
    "lib/index.ts"
  ]
}

---

在同一个存储库中的其他项目中，这个“通用”包被添加到依赖项中，作为

"common": "file:../common"

。

Answer 1

@AluanHaddad 确实是对的 - 问题是有多个反应。

我通过

common

安装

npm i ../common

包，它只是创建了一个指向该文件夹的符号链接 - 包括它的

node_modules

，而它又包含了一份 React 的副本。

为了解决这个问题，我必须将

common

包打包到 tarball 中并安装它：

npm pack

到

common

包中，然后

npm i ../common/common-1.0.0.tgz

到使用的项目中。

奖励：可以使用

package.json

的脚本中的以下内容来实现该通用包的自动更新：

"prebuild":"npm uninstall common && cd ../common && npm run build && npm run package && cd ../back-to-current-project && npm i ../common/common-1.0.0.tgz"

只要

common

包的版本号不改变，这就有效。