React is not defined after importing a custom npm package

Question

I've built and published a npm package to a private registry. Its includes dist/esm/index.js and /dist/cjs/index.js When im using it in one of my project (import { Button } from "@private/package") Im getting React is not defined. The package is built with React and imported into a next project.

package.json of the package

{
  "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"
    }
  }
}

Not sure it helps but here's esm/index.js content

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

and here React is not defined. Shouldn't the peerDeps solve this?

Answer 1

In React projects, JSX is transformed into React.createElement calls. This requires that React be in scope wherever JSX is used. However, in your esm/index.js file, you're using JSX (like in your Button, Badge, and Checkbox components), but there's no explicit import React from 'react' statement at the top of the file. This can lead to the "React is not defined" error.

Even though you have React as a peer dependency, it doesn't automatically import React into the files of your package. Peer dependencies ensure that your package will use the React version provided by the consumer's project, but you still need to import it wherever necessary in your package.

Ensure that all files in your package that use JSX explicitly import React at the top. For example:

import React from 'react';

// Your component definitions...