Rollup including my react library into bundle even though I have externals written - reactjs

Question

I am trying to build a component library for myself with a few overrides. But it's constantly giving me an insane challenge. I can't import it into my projects. Rollup for some reason is packing the whole react lib into my bundle.js file.
This rollup config
/* eslint-disable */
import { readdirSync } from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';
const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.json'];
const CODES = [
'THIS_IS_UNDEFINED',
'MISSING_GLOBAL_NAME',
'CIRCULAR_DEPENDENCY'
];
const discardWarning = (warning) => {
if (CODES.includes(warning.code)) {
return;
}
console.error(warning);
};
const env = process.env.NODE_ENV;
const commonPlugins = () => [
postcss({
extract: true,
modules: true,
use: ['sass']
}),
external(),
babel({
babelrc: false,
presets: [['#babel/preset-env', { modules: false }], '#babel/preset-react'],
extensions: EXTENSIONS,
exclude: [
'node_modules/**',
'src/*/*.stories.js',
'src/*/*.spec.js',
'src/*/*.test.js'
]
}),
commonjs({
include: /node_modules/
}),
replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
resolve()
];
export default [
{
onwarn: discardWarning,
input: 'src/index.js',
output: {
esModule: false,
file: pkg.unpkg,
format: 'cjs',
name: 'ph-shared',
exports: 'named'
globals: {
antd: 'antd',
react: 'React',
'react-dom': 'ReactDOM'
}
},
external: ['react', '#ant-design', 'react-notification-system', 'antd'],
plugins: [...commonPlugins(), env === 'production' && terser()],
output: [{ dir: 'dist', format: 'cjs', exports: 'named', sourcemap: true }]
}
];
and this is package.json file
{
"name": "ph-shared",
"version": "0.0.1",
"author": "usmantahirr",
"description": "Component library for PH",
"main": "src/index.js",
"source": "src/index.js",
"module": "dist/bundle.js",
"engines": {
"node": ">=12"
},
"scripts": {
"build": "rollup -c",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint ./src/",
"lint:fix": "eslint ./src/ --fix",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,css}": [
"prettier --write",
"npm run lint:fix",
"git add"
]
},
"peerDependencies": {
"#ant-design/icons": "^4.2.2",
"react-notification-system": "^0.4.0",
"antd": "^4.6.4",
"react": "^16.13.1",
"node-sass": "^4.14.1"
},
"devDependencies": {
"#ant-design/icons": "^4.2.2",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#storybook/addon-actions": "^6.0.21",
"#storybook/addon-essentials": "^6.0.21",
"#storybook/addon-knobs": "^6.0.21",
"#storybook/addon-links": "^6.0.21",
"#storybook/preset-create-react-app": "^3.1.4",
"#storybook/react": "^6.0.21",
"antd": "^4.6.4",
"babel": "^6.23.0",
"babel-loader": "^8.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"husky": "^1.3.1",
"lint-staged": "^8.1.5",
"node-sass": "^4.14.1",
"prettier": "^2.0.4",
"react-is": "^16.13.1",
"react-notification-system": "^0.4.0",
"react-scripts": "^3.4.3",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.3",
"rollup-plugin-postcss": "^3.1.8",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^7.0.2",
"sass-resources-loader": "^2.1.0",
"styled-components": "^5.2.0"
},
"dependencies": {}
}
I also want to override some antD styles using SCSS. and it's converting all the classes with funny names even though they are not scss modules. It's extracting out a single file with all of my classes renamed. I was expecting only scss modules classes to be renamed.