- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在探索使用 React 和汇总创建组件库,但发现使用该库的应用程序以错误的顺序捆绑它。
这导致以下错误:
bundle.js:99 Uncaught Error: Cannot find module 'react/jsx-runtime'
at webpackMissingModule (bundle.js:99)
at Module.../../../component-library/dist/index.es.js
在 Webpack CLI 中,我也会遇到类似的错误:
ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react' in '/.../component-library/dist'
@ /.../component-library/dist/index.es.js 2:0-33 68:18-26
@ ./src/App/index.jsx
@ ./src/index.js
ERROR in /.../component-library/dist/index.es.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/.../component-library/dist'
@ /...component-library/dist/index.es.js 1:0-41 74:22-26
@ ./src/App/index.jsx
@ ./src/index.js
我没有在任何地方发布这个库,所以只使用
yarn link
目前。
import peerDepsExternal from "rollup-plugin-peer-deps-external"
import babel from "@rollup/plugin-babel"
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
const packageJson = require("./package.json")
const config = [
{
input: "./src/index.js",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
external: Object.keys(packageJson.peerDependencies || {}),
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
babel({ exclude: "node_modules/**", babelHelpers: "bundled" }),
],
},
]
export default config
我的 babel 配置
module.exports = {
presets: [["@babel/preset-env"], ["@babel/preset-react", { runtime: "automatic" }]],
}
我的 package.json
{
"name": "component-library",
"version": "0.0.0",
"description": "A component library.",
"main": "dist/index.js",
"module": "dist/index.es.js",
"repository": "https://github.com/.../component-library.git",
"private": true,
"scripts": {
"watch": "rollup -c --watch",
"build": "rollup -c"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@rollup/plugin-babel": "^5.2.2",
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.1.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/react-hooks": "^5.0.3",
"@testing-library/user-event": "^12.6.2",
"eslint": "^7.18.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.10.1",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"rollup": "^2.38.0",
"rollup-plugin-peer-deps-external": "^2.2.4"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
我可以看到汇总输出的代码看起来是正确的:
import { jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
//continue...
在我的应用程序的 Webpack 输出的包中,它在靠近顶部的任何依赖项(如 React 或实际应用程序代码)之前添加了组件的代码。
line 76: //prior bundled code...
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "../../../component-library/dist/index.es.js":
/*!*******************************************************************!*\
!*** /.../component-library/dist/index.es.js ***!
\*******************************************************************/
/*! exports provided: Example */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Example", function() { return Example; });
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react/jsx-runtime'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
!(function webpackMissingModule() { var e = new Error("Cannot find module 'react'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
//continue...
//react/jsx-runtime is set up on line 118391
无论我在 App 中的何处添加组件,代码都捆绑在同一个位置。我还尝试将 React 包含在库中的汇总包中,但是我的应用程序提示加载了多个 React 版本。
最佳答案
所以我的设置实际上是有效的。符号链接(symbolic link)中存在某种故障。我可以通过运行 yarn unlink
来解决和 yarn link
.该软件包现在已正确捆绑。
关于javascript - Uncaught Error : Cannot find module 'react/jsx-runtime' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65913201/
你好我是 Angular JS 的初学者,当我开始创建模块和 Controller 时,我无法打印我的消息,下面是我的代码 var myModule = angular.module("myFirst
我对 JQuery 还是个新手,我正在尝试使用它遍历 JSON 数组并使用数组中的数据更新我的网页。 JSON 文件如下所示: [ { "firstname":"John",
我正在使用 AngularJS 1.3.5,我正在尝试从 json 文件中获取信息。这是我的代码:HTML 文件: {{da
我正在创建 Bootstrap 模板。我收到两个错误,我不知道自己做错了什么。当我搜索类似的问题时,似乎是脚本错乱了,但我认为它们的位置是正确的。 两个错误: 未捕获的 ReferenceError:
我试图用子菜单制作导航栏,但我一直收到 dropMenu 未定义,当我将鼠标悬停在两个巴黎链接上时,我收到 Uncaught TypeError: Cannot read property 'styl
我正在尝试在名为 UserComponent 的 Angular 组件上运行 karma 测试。在此组件中,我有一个 ngOnInit 执行此操作: ngOnInit() { const
当我启用 login.spec.ts 测试时,对于不同的测试,我总是随机收到此错误。未捕获错误:未捕获( promise ):错误:无法匹配任何路由。 URL 段:“注销” 我尝试使用以下方法伪造 a
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ,确保 Controller 文件
在 AWS Elastic Beanstalk 上部署应用程序后会发生此错误。构建和部署成功,所有模块都正常工作,除了一个显示上述 super 表达式错误的模块。一切似乎都在本地机器上正常工作,甚至可
我刚刚开始使用 Node.js 并尝试使用模块。我已经安装了 Node 和 npm,并确保一切顺利。我将在下面添加代码来向您展示我得到了什么。 我有两个 js 文件,它们在这里。 app.js: va
在 Android 4.4.2 KitKat (API 19) 模拟器上运行时,我的代码出现问题... 当我在 Android 4.3 (API 18) 模拟器上模拟我的项目时,它正常工作并使用 Ma
function more(){ var MoreDetails = document.getElementById('MoreDetails'); More
我正在练习 Javascript,并且有以下代码,该代码在 sets[i][j] = initial_sets [i ][j]; 行。这个想法似乎是正确的,但我不明白为什么会出现错误。 var set
$(document).ready(function(){ $('#name').val('Name1'); }); function clickMe(){ console.lo
我正在创建一个网络应用程序,但我遇到了一个无法解决的简单问题。我已将产生问题的代码放在这里:http://jsfiddle.net/rkumarnirmal/5w3FG/ 应该显示此答案的第二个ale
我正在执行一项长时间运行的任务,在中间的某个位置,可能会抛出此异常: Uncaught DOMException: Blocked a frame with origin "http://localh
我试图通过使用 HTML5 中的 onEnded 属性一首接一首地播放 3 首歌曲。这是我的第一次尝试,但出现错误。 错误: Uncaught ReferenceError: src is not d
检查 Fiddle 以查看发生的故障。 当我将数据(即使我将其留空)添加到文本框并尝试单击“添加”时,它没有执行任何操作。 打开 Chrome 和 Firefox 控制台都给我同样的错误,它说“cha
这个问题在这里已经有了答案: How to access the correct `this` inside a callback (13 个回答) 关闭5年前。 您好,这是我的(快捷方式)示例代码:
我正在处理一个项目,每次 Node 运行我的代码时,浏览器控制台都会给我这个: Uncaught TypeError: Failed to resolve module specifier "expr
我是一名优秀的程序员,十分优秀!