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

Viewed 1263

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.

0 Answers
Related