React App 的 NPM 包与 GitHub 一起工作但不与 npm 注册表/npm 链接一起工作

如何解决React App 的 NPM 包与 GitHub 一起工作但不与 npm 注册表/npm 链接一起工作

我创建了一个包含多个独立模块的 React 应用程序。为了保持这些模块独立，我们创建了各种 npm 包，并将这些包用作项目依赖项。我们使用 babel 创建包，并使用 babel 的各种预设来编译 react 应用程序并创建一个包。但是我们正面临一个奇怪的问题。如果我们将包上传到 GitHub 上作为存储库，然后使用 npm i "git url" 将包安装到主项目，那么它工作得很好，但是如果我们将包上传到 npm 注册表，则会出现以下错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

当我们尝试使用 npm link 在本地集成和测试包时，我们也面临同样的错误。

实际包的package.json 如下所示：

{
  "name": "name-of-package","version": "1.0.0","description": "","main": "code/AppEntry.js","dependencies": {
    "@date-io/date-fns": "^1.3.13","@material-ui/core": "^4.11.0","@material-ui/data-grid": "^4.0.0-alpha.8","@material-ui/icons": "^4.11.2","@material-ui/lab": "^4.0.0-alpha.56","@material-ui/pickers": "^3.2.10","bootstrap": "^4.5.3","concurrently": "^5.3.0","connected-react-router": "^6.8.0","cra-template": "1.0.3","date-fns": "^2.16.1","history": "^4.10.1","lodash": "^4.17.20","moment": "^2.29.1","node-sass": "^4.14.1","nodemon": "^2.0.6","npm-run-all": "^4.1.5","react": "^17.0.1","react-bootstrap": "^1.4.0","react-dom": "^17.0.1","react-redux": "^7.2.1","react-router-dom": "^5.2.0","react-scripts": "^4.0.2","react-swipeable-views": "^0.13.9","react-to-print": "^2.12.2","redux": "^4.0.5","redux-saga": "^1.1.3","uikit": "^3.5.9"
  },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"repository": {
    "type": "git","url": "url-of-git-repo"
  },"author": "","license": "ISC","bugs": {
    "url": "url-of-issues-page"
  },"homepage": "url-to-git-read-me-page"
}

应用程序（包的反应应用程序）的 package.json 如下所示：

{


"name": "child app name","version": "0.1.0","private": true,"main": "src/AppEntry.js","babel": {
    "presets": [
      "@babel/preset-react"
    ],"plugins": [
      "@babel/plugin-proposal-class-properties","@babel/plugin-proposal-optional-chaining"
    ],"ignore": [
      "src/index.js"
    ]
  },"scripts": {
    "client": "react-scripts start","build": "react-scripts build","server": "nodemon --inspect ../server/app.js","start": "npm run client","start-both": "concurrently \"npm run server\" \"npm run client","pkg-build": "cd dist && rm -rf code && mkdir code && cd .. && npx babel src --out-dir dist/code --copy-files","pkg-push": "npm run pkg-build && cd dist && git add . && git commit -m 'auto commit' && git push origin dev && cd .."
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"devDependencies": {
    "@babel/cli": "^7.12.10","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/plugin-proposal-optional-chaining": "^7.12.7","@babel/preset-react": "^7.12.10"
  }
}

上面的 package.json 也包含了在 GitHub 上编译和发布包的脚本。

我们已经检查并确保父应用和子包上的 react、react-scripts 和其他重要包的版本相同。

我们导入和使用独立包的父项目的文件是这样的

import React from 'react'
import MainComponent from 'pkgName'

export default function Index() {
    // all the necessary code here
    return (
        <div>
            
            <MainComponent {* all-the-required-props *} />
        </div>
    )
}