RollupError: "default" is not exported by "node_modules/react/index.js"

Question

Using Rollup for the first time for creating a library, have a basic button component and running into this error when running rollup - c

src/index.ts → dist/esm/index.js... [!] RollupError: "default" is not exported by "node_modules/react/index.js", imported by "src/components/Button/Button.tsx". https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module src/components/Button/Button.tsx (1:7) 1: import React from "react"; ^ 2: const Button = (props) => {

Followed the instructions from the troubleshooting link, installed @rollup/plugin-commonjs but still get this error.

package.json

{
  "name": "button-library",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "rollup": "rollup -c"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-typescript": "^11.1.3",
    "@types/react": "^18.2.22",
    "jest-environment-jsdom": "^29.7.0",
    "rollup": "^3.29.2",
    "rollup-plugin-dts": "^6.0.2",
    "rollup-plugin-postcss": "^4.0.2",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index/.d.ts"
}

Rollup config

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      {
        dir: "output",
        format: "cjs",
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [
      {
        file: "build/scripts.js",
        format: "esm",
        sourcemap: true,
        globals: ["react"],
      },
      {
        file: "dist/index.d.ts",
        format: "esm",
      },
    ],
    plugins: [
      commonjs({
        include: "./node_modules/**",
      }),
      dts(),
    ],
    external: [/\.(css|less|scss)$/],
  },
];

The Button component

import React from "react";

interface ButtonProps {
  label: string;
}

const Button = (props: ButtonProps) => {
  return <button>{props.label}</button>;
};

export default Button;

Answer 1

Here is the config that worked, also needed to update tsconfig and add a bablerc

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from '@rollup/plugin-typescript';

export default {
    input: 'src/index.ts',
    output: [
        {
            file: 'dist/index.js',
            format: 'cjs',
            sourcemap: true
        },
        {
            file: 'dist/index.esm.js',
            format: 'esm',
            sourcemap: true
        }
    ],
    plugins: [
        peerDepsExternal(),
        postcss({
            inject: true
        }),
        typescript(),
        babel({
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            exclude: 'node_modules/**'
        }),
        resolve(),
        commonjs()
    ],
};

tsconfig

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "es6",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": [
      "src"
    ],
    "baseUrl": ".",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true
  },
  "include": [
    "src/**/*"
  ]
}

bablerc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

packages

"devDependencies": {
  "@babel/core": "^7.22.20",
  "@babel/preset-env": "^7.22.20",
  "@babel/preset-react": "^7.22.15",
  "@babel/preset-typescript": "^7.22.15",
  "@rollup/plugin-commonjs": "^25.0.4",
  "@rollup/plugin-node-resolve": "^15.2.1",
  "@rollup/plugin-typescript": "^11.1.3",
  "@types/react": "^18.2.22",
  "rollup": "^2.79.1",
  "rollup-plugin-babel": "^4.4.0",
  "rollup-plugin-peer-deps-external": "^2.2.4",
  "rollup-plugin-postcss": "^4.0.2",
  "tslib": "^2.6.2",
  "typescript": "*"
},