Exclude react library from rollup build

Question

I'm trying to build react library (npm package), but I have react included in my bundle (I have it in peerDependencies so it should not be included).

Package.json:

{
  "name": "sensus-ui",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "module": "build/index.esm.js",
  "files": [
    "build"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clean": "rimraf dist",
    "build": "npm run clean && rollup -c",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-react": "^7.17.12",
    "@rollup/plugin-alias": "^3.1.9",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-image": "^2.1.1",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.3",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/jest": "^28.1.1",
    "@types/node": "^18.0.0",
    "@types/react": "^17.0.34",
    "@types/react-collapse": "^5.0.1",
    "@types/react-dom": "^17.0.11",
    "@types/uuid": "^8.3.4",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "react": "^17.0.2",
    "react-collapse": "^5.1.1",
    "react-dom": "^17.0.2",
    "react-icons": "^4.4.0",
    "react-masonry-component": "^6.3.0",
    "react-perfect-scrollbar": "^1.5.8",
    "rimraf": "^3.0.2",
    "rollup": "^2.75.7",
    "rollup-plugin-copy": "^3.4.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-scss": "^3.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.32.1",
    "rollup-plugin-visualizer": "^5.6.0",
    "sass": "^1.49.7",
    "sass-loader": "^13.0.0",
    "style-loader": "^3.3.1",
    "typescript": "^4.5.5",
    "uuid": "^8.3.2"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-collapse": "^5.1.1",
    "react-dom": "^17.0.2",
    "react-icons": "^4.4.0",
    "react-masonry-component": "^6.3.0",
    "react-perfect-scrollbar": "^1.5.8"
  }
}

My rollup configuration:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import scss from 'rollup-plugin-scss'
import dts from 'rollup-plugin-dts';
import image from '@rollup/plugin-image';
import typescript from 'rollup-plugin-typescript2'

const packageJson = require('./package.json');

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
                name: 'react-ts-lib'
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true
            }
        ],
        external: [
            'react',
            'react-dom',
            "react-collapse",
            "react-icons",
            "react-masonry-component",
            "react-perfect-scrollbar",
            "uuid"
        ],
        plugins: [
            external(),
            resolve(),
            commonjs(),
            scss(),
            image(),
            typescript({ tsconfig: './tsconfig.json' }),
            terser()
        ],
    },
    {
        input: 'dist/index.d.ts',
        output: [{ file: 'dist/types.d.ts', format: "esm" }],
        external: [
            /\.css$/, 
            /\.scss$/,
            'react',
            'react-dom',
            "react-collapse",
            "react-icons",
            "react-masonry-component",
            "react-perfect-scrollbar",
            "uuid"
        ],
        plugins: [dts()],
    },
]

When I use this library in other applications, I always get error that two versions of react are loaded. Is this somehow possible to exclude from build? As you can see I tried to include all packages in external of rollup config, but that doesnt help.

Answer 1

You have react in your devDependencies section. You won't need it, as you add react to your peerDependencies. So remove react from devDependencies and it should solve your problem.