导入在Next.JS项目中派生和编辑的包时出错 [英] Error importing a package that was forked and edited in a Next.JS project

问题描述

我正在使用此项目的Reaction-Headspace，需要编辑其代码，以便<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}'"
  }
}

推荐答案

您忘记了使用build命令生成派生库。

因此，构建它：

npm build
// or
yarn build

现在使用它，您的应用程序不会出现任何问题：

import Headroom from "react-headroom"

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

这篇关于导入在Next.JS项目中派生和编辑的包时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！