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

Question

我正在为此项目使用 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 <mathews.kyle@gmail.com>",
  "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}'"
  }
}

Answer 1

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

所以，构建它：

npm build
// or
yarn build

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

import Headroom from "react-headroom"

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