导入在 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

(...)

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

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

正如@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"

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

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

Error importing a package that was forked and edited in a Next.JS project

javascript

node.js

reactjs

yarnpkg

next.js