发布到 npm 时出现问题

2024-05-14

所以我尝试使用 React 构建一个开源项目并将其推送到 npm。问题是,我的组件虽然在测试环境中运行良好 - 安装到其他组件,但当我将其发布到 npm 并下载包并尝试访问它时,它给了我一个错误。

这是代码的一个小示例

import React, {Component} from 'react';
import {Nav, NavBar, NavLink, NavItem} from 'react-bootstrap';


class GitNav extends Component{
    handleSelect(eventKey){
      window.location = this.props.NavURLs[eventKey];
    }
  render(props){
    const NavTextItems = this.props.NavTexts.map((eachNav, key) =>
      <NavItem eventKey={key} href="#">{eachNav}</NavItem>
      );
    return(
      <Navbar fixedBottom collapseOnSelect>
          <Navbar.Header>
            <Navbar.Toggle />
          </Navbar.Header>
            <Navbar.Collapse>
              <Nav onSelect={this.handleSelect.bind(this)}>
                {NavTextItems}
              </Nav>
            </Navbar.Collapse>
          </Navbar>
    );
  }
}

export default GitNav;

这是错误:

Error in ./~/react-github-nav/index.js
Module parse failed: /Users/theawesomeguy/Desktop/Projects/resume3/resume/node_modules/react-github-nav/index.js Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:6)
 @ ./src/App.js 20:22-49

如果有人能帮助我解决这个问题,那就太好了。提前致谢!


为了将 React 库推送到 NPM,您可能需要一些样板文件来为您安装和转换许多东西。

=====

我还成功地将几个 React 库推送到 NPM 中:

https://www.npmjs.com/~thinhvo0108 https://www.npmjs.com/~thinhvo0108

https://www.npmjs.com/package/react-sticky-dynamic-header https://www.npmjs.com/package/react-sticky-dynamic-header

https://www.npmjs.com/package/react-ringing-bell https://www.npmjs.com/package/react-ringing-bell

=====

你的 github 存储库的文件夹结构也应该与我的类似:

https://github.com/thinhvo0108/react-sticky-dynamic-header https://github.com/thinhvo0108/react-sticky-dynamic-header

https://github.com/thinhvo0108/react-ringing-bell https://github.com/thinhvo0108/react-ringing-bell

=====

有用的教程如下:

(样板源)https://github.com/juliancwirko/react-npm-boilerplate https://github.com/juliancwirko/react-npm-boilerplate

(作者文章)http://julian.io/creating-react-npm-packages-with-es2015/ http://julian.io/creating-react-npm-packages-with-es2015/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

发布到 npm 时出现问题 的相关文章

  • 在反应中访问回调内的 event.target

    我有以下课程片段 constructor props super props this timeout null search e gt clearTimeout this timeout this timeout setTimeout f
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • npm 错误! Object.entries 不是函数

    当我尝试为任何包运行 npm install 时 我的项目显示此错误 npm ERR Object entries is not a function 有人有同样的错误吗 将 npm 更新到最新版本 6 0 1 可以解决此问题 此处已报道
  • npm WARN 已弃用 [email protected]:改用 uuid 模块

    当我尝试时 npm install g cordova latest总是得到npm 警告已弃用 电子邮件受保护 cdn cgi l email protection 使用 uuid 模块代替 mac 操作系统塞拉利昂 10 12npm v
  • 从 ES6 模块导入函数表达式或函数声明有什么区别?

    据我了解 参见第 16 3 2 1 节 http exploringjs com es6 ch modules html ES6 允许函数 类导出操作数使用不同的语法 区别在于导出的函数是否需要在导入时解释为函数声明 在这种情况下 您可以编
  • MacOS Big Sur 中的 NPM 错误“找不到 Python 可执行文件”

    我已经花了整整一周的时间寻找这个问题的答案 但没有成功 我查看了每个 StackOverflow 帖子 Google 的每一篇文章以及我能找到的每个相关的 Github 问题 大多数相关错误似乎都比较旧 所以我想知道我的问题是否由于我使用的
  • 如何让 webpack 转换 React 生产文件?

    当我使用 webpack 与 React 16 捆绑我的应用程序时 我在浏览器中收到 Uncaught ReferenceError require is not Defined 对于react和react dom 导致错误的资源是reac
  • Nodejs + npm,在ntfs分区安装模块

    我在安装 npm 模块时遇到问题 NodeJS 安装在 Windows 主机上 Virtual Box 上运行的 Ubuntu 11 10 上 我的项目文件位于 NTFS 分区上 我必须与 Windows 共享它们 当我尝试安装某些 npm
  • 如何在打字稿中使用react-navigation的withNavigation?

    我正在尝试结合使用react native react navigation 和typescript 来创建一个应用程序 只有两个屏幕 HomeScreen and ConfigScreen 和一个组件 GoToConfigButton 总
  • 在AWS S3中部署react-redux应用程序

    我在堆栈溢出中遇到了很多类似的问题one https stackoverflow com questions 16267339 s3 static website hosting route all paths to index html
  • ref scrollIntoView 不适用于反应上的平滑行为

    我正在创建一个组件 该组件将保存动态元素列表 出于样式原因 我需要将每个部分的标题保留在粘性导航菜单中 当用户上下滚动部分列表时 我需要应用样式规则 并将菜单导航中的同一部分带入视图 因此我尝试将scrollIntoView与菜单部分引用一
  • React router dom 6 中的受保护路由

    我在反应中创建了简单的用户上下文 用户提供者 export const AuthContext createContext export const AuthProvider children gt const user setUser u
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 如何在反应应用程序中重新加载页面(状态)

    我开始学习react js 并在react应用程序中开发了一个简单的石头剪刀布游戏 我发现创建一个重新加载按钮有点困难 因为它当然与具有如下功能的 javascript 按钮不同
  • 无法在scrollView中滚动

    我有一个屏幕 我可以在输入字段中输入内容并获得相应的搜索结果 该列表在 ScrollView 中呈现 但当键盘打开时 在 Android 中 它仍然不允许我滚动 我怎样才能解决这个问题 return lt gt addressesFound
  • Node.js es6 使用index.js 导出/导入

    我有以下文件夹结构 src index js lib test js dist examples example js src lib test js export default class Test src index js impor
  • 全新安装 create-next-app 后,无效的 href 传递给路由器错误

    在我的本地计算机上安装 nextjs 应用程序后 使用create next app我在控制台中收到此错误Invalid href passed to router 有谁知道如何解决它 我尝试使用to属性而不是href属性在Link组件的但
  • 在 createAsyncThunk 上调度操作?

    我有一个 thunk 动作是由createAsyncThunk 我想在调用 api 更新状态之前调度一个操作 我不想使用动作getProducts pending因为我想要派遣actionLoading 对于其他 thunk 操作 我怎样才
  • React TypeError:x 不是函数

    我在子组件中从父组件调用函数 booksRefresh 但出现错误 类型错误 booksRefresh 不是函数 我不知道为什么 因为 booksRefresh 是一个函数 有人可以帮我解释为什么会出现这个错误吗 这是我的代码 import

随机推荐

  • 如何处理 clang 中的全局构造函数警告?

    Clang 警告 当使用 Weverything or Wglobal constructors 关于静态对象的构造函数 warning declaration requires a global constructor Wglobal c
  • PHP file_exists() 对我不起作用?

    由于某种原因 下面的 PHP 代码将无法工作 我无法弄清楚 很奇怪的是 file exists 似乎没有看到图像确实存在 我已经检查以确保将良好的文件路径插入到 file exists 函数中并且它仍在运行 如果我将 file exists
  • Powershell XMLDocument保存为无BOM的UTF-8

    我构建了一个 System Xml XmlDocument 类型的 XML 对象 scheme gettype IsPublic IsSerial Name BaseType True False XmlDocument System Xm
  • Android 和 Google 地图内部片段以及其他控件和 viewpager

    我是android编程新手 我有一个带有 3 个页面 片段 的小应用程序 使用 pageradapter 和 viewpager 在它们之间滑动 其中一个页面包含复选框 和其他控件 和地图 我的问题是程序在启动时崩溃 Fragment co
  • 所有事件的 HTML5 EventSource 监听器?

    我使用 EventSource 在 JavaScript 客户端应用程序中推送通知 我可以像这样附加事件监听器 source addEventListener my custom event type function e console
  • 按偶数和奇数排序

    我想知道是否可以使用 std sort 函数按偶数或奇数对数字进行排序 我有以下代码 但我不确定如何在 std sort 中实现 inline bool isEven const Point n return n getX 2 0 它是否正
  • 从嵌入 C# 的浏览器控件获取 HTML 源代码

    我有一个嵌入在 C Windows 应用程序中的浏览器控件 我想获取渲染的 HTML 可能已被 javascript 修改 而不是原始 HTML 有什么建议么 您可以获取 HTML 并确实设置它 使用WebBrowser DocumentT
  • Talend 中的常见日志记录

    我试图在 Talend 中实现日志记录 所以我使用普通组件做了一个工作 我通过 Twarn 和 Tdie 记录了错误 信息和调试 使用 Logcatcher 我将日志分为调试和错误两个文件 这部分工作正常 现在我已经做了两份工作 首先 使用
  • Google Sheets API v4 和 valueInputOption

    我的电子表格中有三列 第一个是日期 第二个和第三个是简单字符串 当我批量上传数据时valueInputOption RAW 我的日期列得到错误的结果 所有日期前面都有一个看不见的撇号 字符串列没问题 当我使用valueInputOption
  • GWT、Maven、Spring - 在 Maven 构建上获取 com.thoughtworks.qdox.parser.ParseException:语法错误

    我正在尝试集成此演示中的代码 http code google com p gwt spring starter app http code google com p gwt spring starter app 进入我的主要 Spring
  • Pandas如何按时间段过滤DataFrame

    我有一个包含下表的文件 Name AvailableDate totalRemaining 0 X3321 2018 03 14 13 00 00 200 1 X3321 2018 03 14 14 00 00 200 2 X3321 20
  • 为什么 jar 执行的通配符在 docker CMD 中不起作用?

    我有一个Dockerfile与以下CMD启动我的 Spring Boot 应用程序 FROM java 8 jre CMD java jar app file jar 当我尝试从创建的图像启动容器时 我得到 Error Unable to
  • mod_rewrite GUI?

    任何人都有用于开发 mod rewrite 规则的图形工具 理想情况下 它会显示重写管道 然后当给定 uri 实例时 会显示应用时的转换 让它们正确设置总是很痛苦 因此任何使其变得更容易的方法都会有所帮助 对于 htaccess 阅读 mo
  • Java AES 256 加密

    我有下面的 java 代码来加密使用 64 个字符密钥的字符串 我的问题是这会是 AES 256 加密吗 String keyString C0BAE23DF8B51807B3E17D21925FADF273A70181E1D81B8EDE
  • 每个搜索词显示一行,如果未找到则替换默认值

    Query SELECT product id name FROM product WHERE barcode in 681027 8901030349379 679046 679047 679082 679228 679230 67923
  • iostream 对象 cin、cout、cerr 和 clog 是如何实现的?

    iostream 对象 cin cout cerr 和 clog 是在 iostream 标头中声明的对象 我知道在某些编译器中可能会在构造这些 iostream 对象之前尝试使用它们 因此在某些情况下它们必须受到 静态初始化顺序失败 的影
  • 查找 postgres 提供的列表中不存在的值

    我试图找到一个查询来告诉我数据库中没有的值 例如 select seqID segment from flu where seqID IN 1 2 3 4 5 6 7 8 9 现在 如果我的数据库没有 seqID 3 8 9 我将如何查找
  • LINQ:从类型 T 的列表中,仅检索某个子类 S 的对象

    给定一个简单的继承层次结构 人 gt 学生 教师 职员 假设我有一个人员列表 L 该列表中有一些学生 教师和工作人员 使用 LINQ 和 C 有没有办法编写一个只能检索特定类型人员的方法 我知道我可以做类似的事情 var peopleIWa
  • 如何使 Rails 3 资源预编译速度更快?

    我有一个正在运行的 Rails 3 2 1 应用程序 我正在通过 Capistrano 进行部署deploy assets它运行deploy assets precompile task 一切工作都很好 除了编译本身非常慢 我没有那么多 C
  • 发布到 npm 时出现问题

    所以我尝试使用 React 构建一个开源项目并将其推送到 npm 问题是 我的组件虽然在测试环境中运行良好 安装到其他组件 但当我将其发布到 npm 并下载包并尝试访问它时 它给了我一个错误 这是代码的一个小示例 import React