我已经构建并发布了一个npm包到一个私有注册表。它包括dist/esm/index.js
和/dist/cjs/index.js
当我在我的一个项目(import { Button } from "@private/package"
)中使用它时,我得到了React is not defined
。这个包是用React构建的,并导入到下一个项目中。package.json
的包
{
"name": "@affilomania-org/ui-trafficon-storybook",
"version": "1.0.49",
"description": "",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"scripts": {
"test": "echo tests are not aviable",
"build:package": "rollup -c --bundleConfigAsCjs",
"build": "npm run build:package && npm run build:storybook",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"build:storybook": "storybook build",
"storybook": "storybook dev -p 6006"
},
"files": [
"dist"
],
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-react": "^7.23.3",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup": "^4.7.0",
"rollup-plugin-peer-deps-external": "^2.2.4"
},
"dependencies": {
"@storybook/addon-essentials": "^7.6.4",
"@storybook/addon-interactions": "^7.6.4",
"@storybook/addon-links": "^7.6.4",
"@storybook/addon-onboarding": "^1.0.9",
"@storybook/blocks": "^7.6.4",
"@storybook/react": "^7.6.4",
"@storybook/react-vite": "^7.6.4",
"@storybook/test": "^7.6.4",
"@tippyjs/react": "^4.2.6",
"autoprefixer": "^10.4.16",
"clsx": "^2.0.0",
"cypress": "^13.6.1",
"eslint-plugin-cypress": "^2.15.1",
"husky": "^4.3.8",
"storybook": "^7.6.4",
"tailwindcss": "^3.3.6"
},
"peerDependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run test && npm version patch"
}
}
}
字符串
不确定它是否有帮助,但这里有esm/index.js
内容
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
const Button = ({
label,
onClick,
variant,
Icon = null,
disabled = false
}) => {
const variants = {
primary: "bg-orange-800 text-white hover:bg-orange-900",
secondary: "border border-orange-800 text-gray-900 hover:bg-orange-100"
};
const variantFill = {
primary: "fill-white",
secondary: "fill-orange-800"
};
const disabledClassName = "text-gray-700 bg-gray-300 cursor-not-allowed";
const className = "rounded-full px-4 h-8 flex items-center gap-2";
const fillClassName = disabled ? "fill-gray-700" : variantFill[variant];
return /*#__PURE__*/React.createElement("button", {
"data-cy": "button",
onClick: onClick,
disabled: disabled,
className: clsx(disabled ? disabledClassName : variants[variant], className)
}, Icon && /*#__PURE__*/React.createElement(Icon, {
fill: fillClassName
}), /*#__PURE__*/React.createElement("span", null, label));
};
const Badge = ({
label,
variant = "default"
}) => {
const variants = {
default: "bg-gray-300 text-gray-900",
success: "bg-green-200 text-green-900",
error: "bg-red-100 text-red-900"
};
return /*#__PURE__*/React.createElement("span", {
className: clsx("px-2 py-1 rounded-2xl text-sm", variants[variant])
}, label);
};
function CheckMarkIcon() {
return /*#__PURE__*/React.createElement("svg", {
width: "9",
height: "7",
viewBox: "0 0 9 7",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
d: "M2.86015 5.52274L0.726549 3.34601L0 4.08203L2.86015 7L9 0.736018L8.27857 0L2.86015 5.52274Z",
fill: "white"
}));
}
function Checkbox({
id,
checked,
onChange,
label
}) {
return /*#__PURE__*/React.createElement("button", {
type: "button",
className: "flex items-center gap-2",
onClick: onChange,
"data-cy": `checkbox-trigger-${id}`
}, /*#__PURE__*/React.createElement("input", {
"data-cy": `checkbox-${id}`,
checked: checked,
type: "checkbox",
hidden: true,
id: id
}), /*#__PURE__*/React.createElement("label", {
htmlFor: id,
className: clsx("flex gap-3 bg-none rounded w-3 h-3 items-center justify-center cursor-pointer", checked ? "bg-primary" : "border border-gray-300")
}, /*#__PURE__*/React.createElement("div", {
className: checked ? "visible" : "invisible"
}, /*#__PURE__*/React.createElement(CheckMarkIcon, null))), label && /*#__PURE__*/React.createElement("span", {
"data-cy": `checkbox-label-${id}`,
className: clsx(checked ? "text-gray-900" : "text-gray-800", "text-sm")
}, label));
}
export { Badge, Button, Checkbox };
//# sourceMappingURL=index.js.map
型
这里是React is not defined
,难道peerDeps
不能解决这个问题吗
1条答案
按热度按时间h43kikqp1#
在React项目中,JSX被转换为
React.createElement
调用。这要求React在任何使用JSX的范围内。然而,在您的esm/index.js
文件中,您正在使用JSX(如Button
、Badge
和Checkbox
组件),但是在文件的顶部没有明确的import React from 'react'
语句。这可能会导致“React is not defined”错误。即使你将React作为对等依赖,它也不会自动将React导入到你的包的文件中。对等依赖确保你的包将使用消费者项目提供的React版本,但你仍然需要在包中必要的地方导入它。
确保包中所有使用JSX的文件在顶部显式导入React。例如:
字符串