Tree Shaking issues - Rollup with preserveModules set to true

Question

First of all great work with such a superb library that has taken bundling in JS by storm. I really like how the contributors continually push themselves to make this library even more powerful.

Actually I have been using rollup to bundle my component library written in React on atomic design pattern. However when my consuming app instal this library, I get all the components of the library.

My library code is structured as

components
   atoms
     Button
      button.jsx
      index.js (this exports the button as default)
    index.js (exports all other atoms as named exports)
   molecules
    Modal
     Modal.jsx
    index.jsx(exports modal as default)
   index.js (exports all other molecules as named exports)
index.js(exports all atoms and molecules as named exports)

My roll up config is as follows:

import path from "path";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonJs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import svgr from "@svgr/rollup";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import copy from "rollup-plugin-copy";
import json from "@rollup/plugin-json";
import builtins from "rollup-plugin-node-builtins";
import svgOptions from "../shared/svg-loader-options.json";
import moduleDirectories from "../shared/module-directories.json";
import { main, module } from "../../../package.json";

const baseDir = path.join(__dirname, "../../../");

const { NODE_ENV } = process.env;

export default {
input: path.join(baseDir, "src", "index.js"),

output: [
{
file: path.join(baseDir, main),
format: "cjs",
sourcemap: true,
},
{
file: path.join(baseDir, module),
format: "es",
sourcemap: true,
},
],

plugins: [
peerDepsExternal(),

replace({
  "process.env.NODE_ENV": JSON.stringify(NODE_ENV),
}),

svgr(svgOptions),

nodeResolve({
  preferBuiltins: true,
  extensions: [".js", ".jsx"],
  customResolveOptions: {
    moduleDirectory: moduleDirectories,
  },
}),

babel({
  babelHelpers: "bundled",
  exclude: "node_modules/**",
}),

builtins(),

json(),

commonJs(),

copy({
  targets: [{ src: "src/assets/fonts/*", dest: "dist/assets/fonts" }],
}),
],
};

package.json for my project looks like below:

{
"name": "abc-package",
"version": "0.x.x",
"description": "",
"main": "dist/index.js",
"module": "dist/index.esm.js",
"husky": {
"hooks": {
"pre-push": "npm run lint && npm test"
}
},
"scripts": {
"build": "cross-env NODE_ENV=production rollup --config "./internals/build/rollup/rollup.config.js"",
"lint": "eslint "./src//*.js?(x)" "./internals//*.js?(x)"",
"lint:fix": "npm run lint -- --fix",
"start": "cross-env NODE_ENV=dev start-storybook -p 9001 -s ./src/assets",
"storybook:build": "cross-env NODE_ENV=prod build-storybook --quiet -o "./styleguide-site" -s ./src/assets",
"test": "jest",
"test:snapshot": "percy-storybook --b='./styleguide-site' --output_format=json",
"test:interaction": "cypress run",
"test:interaction-debug": "cypress open",
"add-component": "hygen component new",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"engines": {
"node": "^12.0.0",
"npm": "^6.0.0"
},
"files": [
"/dist"
],
"keywords": [],
"author": "",
"peerDependencies": {
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.2.0"
},
"dependencies": {
"dayjs": "1.9.7",
"dom-scroll-into-view": "^2.0.1",
"ramda": "0.27.1",
"react-modal": "3.11.2",
"react-popper-tooltip": "4.0.1",
"react-scroll-to-component": "1.0.2",
"react-transition-group": "4.4.1",
"tween": "0.9.0"
},
"devDependencies": {
"@babel/core": "7.11.6",
"@babel/preset-env": "7.11.5",
"@babel/preset-react": "7.10.4",
"@cucumber/cucumber": "7.0.0-rc.0",
"@invisionapp/dsm-storybook": "0.0.144",
"@percy/cypress": "2.3.3",
"@percy/storybook": "3.3.1",
"@rollup/plugin-babel": "5.2.1",
"@rollup/plugin-commonjs": "15.1.0",
"@rollup/plugin-json": "4.1.0",
"@rollup/plugin-node-resolve": "9.0.0",
"@rollup/plugin-replace": "2.3.3",
"@storybook/addon-a11y": "6.1.17",
"@storybook/addon-actions": "6.1.17",
"@storybook/addon-docs": "6.1.17",
"@storybook/addon-essentials": "6.1.17",
"@storybook/addon-knobs": "6.1.17",
"@storybook/addon-options": "5.3.21",
"@storybook/addon-viewport": "6.1.17",
"@storybook/addons": "6.1.17",
"@storybook/react": "6.1.17",
"@storybook/theming": "6.1.17",
"@svgr/rollup": "5.4.0",
"@svgr/webpack": "5.4.0",
"acorn": "8.0.1",
"babel-eslint": "10.1.0",
"babel-jest": "26.3.0",
"babel-loader": "8.1.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
"bufferutil": "4.0.1",
"canvas": "2.6.1",
"core-js": "3.6.5",
"cross-env": "7.0.3",
"current-git-branch": "1.1.0",
"cypress": "6.2.0",
"cypress-storybook": "0.5.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.5",
"enzyme-to-json": "3.6.1",
"eslint": "7.10.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "6.12.0",
"eslint-plugin-better-styled-components": "1.1.2",
"eslint-plugin-cypress": "2.11.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jest": "24.0.2",
"eslint-plugin-jsx-a11y": "6.3.1",
"eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.21.2",
"eslint-plugin-react-hooks": "4.1.2",
"glob": "7.1.6",
"husky": "4.3.0",
"hygen": "6.0.4",
"jest": "26.4.2",
"jest-styled-components": "7.0.3",
"pascal-case": "3.1.1",
"polished": "3.6.7",
"prettier": "2.1.2",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"rollup": "2.28.2",
"rollup-plugin-copy": "3.3.0",
"rollup-plugin-node-builtins": "2.1.2",
"rollup-plugin-peer-deps-external": "2.2.3",
"simple-git": "2.20.1",
"storybook-addon-pseudo-states": "^1.0.0",
"styled-components": "5.2.0",
"svgo": "1.3.2",
"svgo-loader": "2.2.1",
"terser-webpack-plugin": "4.2.2",
"utf-8-validate": "5.0.2",
"webpack": "4.44.2",
"webpack-cli": "3.3.12"
}
}

I read it on some blog posts that for tree shaking to work properly, you should use preserveModules flag to true.

On doing that, I get node_modules in my dist folder and since node_modules get flattened by npm/yarn when consumed in the app, the build breaks when it tries to resolve from node_modules when the package used in the consuming app(building using webpack), this is already tracked in the issue - https://github.com/rollup/rollup/issues/3684

I tried resolving this by naming node_modules and related paths in the bundle to 'external', after which the package bundles perfectly fine and so does tree shaking, however when the package is consumed in the app, the app blows off. This is already one of the issues on rollup for which I can't find any solution to - and stands in closed status - https://github.com/rollup/rollup-plugin-commonjs/issues/374

I am kind of in a deadlock situation and not sure whats the way ahead. I am in a dire need of support, could you please suggest whats the best way to have this library tree shakeable in true sense owing to the bottlenecks and existing issues in the rollup.

Answer 1

Did you try rollup-plugin-rename-node-modules for renaming?

https://github.com/Lazyuki/rollup-plugin-rename-node-modules

import renameNodeModules from 'rollup-plugin-rename-node-modules'

export default {
  plugins: [renameNodeModules('external')]
};