导入自定义npm包后未定义React

tp5buhyn  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(99)

我已经构建并发布了一个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不能解决这个问题吗

h43kikqp

h43kikqp1#

在React项目中,JSX被转换为React.createElement调用。这要求React在任何使用JSX的范围内。然而,在您的esm/index.js文件中,您正在使用JSX(如ButtonBadgeCheckbox组件),但是在文件的顶部没有明确的import React from 'react'语句。这可能会导致“React is not defined”错误。
即使你将React作为对等依赖,它也不会自动将React导入到你的包的文件中。对等依赖确保你的包将使用消费者项目提供的React版本,但你仍然需要在包中必要的地方导入它。
确保包中所有使用JSX的文件在顶部显式导入React。例如:

import React from 'react';

// Your component definitions...

字符串

相关问题