导入在 Next.JS 项目中分叉和编辑的包时出错

Posted 2023-02-16

【中文标题】导入在 Next.JS 项目中分叉和编辑的包时出错

【英文标题】：Error importing a package that was forked and edited in a Next.JS project

【发布时间】：2021-12-14 12:46:01

【问题描述】：

我在这个项目中使用 react-headroom 并且需要编辑它的代码，所以 <header> 不会调整页面的高度。因此，我分叉了原始的 repo 并在我的版本上进行了更改，以便我可以使用 yarn add <my-git-repo-url> 将其安装到我的项目中，然后通常将其作为任何其他库导入：

// src/components/layout.js
import  useState  from "react"
import  Box, Flex  from "@chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here

(...)

但是，我收到此错误消息，告诉我找不到模块：

我不确定这个过程是否有任何错误（我认为没有），但无法解决这个问题。我在./ 和./node_modules/react-headroom 中都运行了yarn install，结果完全没有变化。

正如@novonimo 所问，这里是模块的package.json：

  "name": "react-headroom",
  "description": "Hide your header until you need it. React.js port of headroom.js",
  "version": "3.2.0",
  "author": "Kyle Mathews <[e-mail]>",
  "bugs": 
    "url": "https://github.com/KyleAMathews/react-headroom/issues"
  ,
  "dependencies": 
    "prop-types": "^15.5.8",
    "raf": "^3.3.0",
    "shallowequal": "^1.1.0"
  ,
  "devDependencies": 
    "babel-cli": "^6.16.0",
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-undefined-to-void": "^6.8.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "chai": "^3.5.0",
    "eslint": "^3.8.0",
    "eslint-config-airbnb": "^12.0.0",
    "eslint-config-airbnb-base": "^9.0.0",
    "eslint-config-prettier": "^6.13.0",
    "eslint-plugin-import": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.4.1",
    "mocha": "^3.1.2",
    "mocha-unfunk-reporter": "^0.4.0",
    "pre-commit": "^1.0.5",
    "prettier": "2.1.2"
  ,
  "directories": 
    "example": "examples"
  ,
  "homepage": "https://github.com/KyleAMathews/react-headroom",
  "keywords": [
    "headroom",
    "react",
    "react-component"
  ],
  "license": "MIT",
  "main": "dist/index.js",
  "peerDependencies": 
    "react": "^16.3.0 || ^17"
  ,
  "repository": 
    "type": "git",
    "url": "https://github.com/KyleAMathews/react-headroom.git"
  ,
  "scripts": 
    "build": "babel --copy-files src --out-dir dist",
    "test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
    "unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
    "test": "npm run unit-test && npm run lint",
    "watch": "./node_modules/.bin/webpack-dev-server --hot",
    "publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
    "lint": "eslint --ignore-path .gitignore src/*",
    "lint:fix": "eslint --ignore-path .gitignore . --fix",
    "format": "prettier --config .prettierrc --write 'src/**/*.js,jsx'"
  

【问题讨论】：

添加分叉的模块 package.json（在/node_module/react-headroom）

当然。就这样吧。

你在使用之前构建了分叉的仓库吗？

我不知道需要它。是这个问题，谢谢！我应该更新答案还是你想自己做？

【参考方案1】：

您忘记使用build 命令构建您的分叉库。

所以，构建它：

npm build
// or
yarn build

现在使用它，您的应用程序没有任何问题：

import Headroom from "react-headroom"

注意：您需要在您的分叉目录而不是项目的根目录中运行上述命令。

【讨论】：

感谢您的回复。我没有意识到这一点。这是我的第一个分叉和编辑的 repo。

祝你好运兄弟@EduardoOliveira

提出另一个关于此的问题。

关于什么？ @EduardoOliveira

抱歉耽搁了。不得不修理我的电脑。这是与此问题相关的新问题：***.com/questions/69780855/… 我想我已经删除了带有上下文的评论，因为它有点重复