javascript - 导入在 Next.JS 项目中分叉和编辑的包时出错
问题描述
我正在为这个项目使用 react-headroom 并且需要编辑它的代码,这样<header>
就不会调整页面的高度。因此,我分叉了原始存储库并对我的版本进行了更改,以便我可以将其安装在我的项目中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}'"
}
}
解决方案
build
您忘记使用该命令构建您的分叉库。
所以,构建它:
npm build
// or
yarn build
现在使用它,您的应用程序没有任何问题:
import Headroom from "react-headroom"
注意:您需要在您的分叉目录而不是项目的根目录中运行上述命令。
推荐阅读
- classname - 更改 div 类时出现看不见的延迟。.
- python - python备份脚本-通过网络运行
- javascript - 导入的模块无法正常工作(JS)
- angular - IONIC ANGULAR:推送通知不适用于 iO。监听器根本没有被触发
- javascript - 为什么第 2 级的父母链接到相同的子节点,或者他们的孩子在组织 Highcharts 中不同
- tosca - 找不到容器“x”
- python - 如何在pyqt5窗口中插入带有cv2的图像裁剪模块
- android - 我怎样才能修复匕首?
- reactjs - 带有 IntputLabel 和 Input 的 Material UI 网格放置在水平行中:如何要求垂直对齐位于标签的中间?
- java - Java - Android Studio 和 NetBeans 使用相同的库 (NatTypeDetector) 产生不同的结果