Rollup Won't Bundle Proptypes Dependency

Question

I'm trying to build a component library of react components. I'd like to keep my prop-types in the library as documentation rather than remove them at build time. The problem is that rollup doesn't bundle all of the prop-types functions.

I end up with these lines in my bundle:

var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');

var checkPropTypes = require('./checkPropTypes');

And the consumers of my library can't resolve those packages so it ends up in an error.

My rollup config looks like this:

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";

export default {
  input: "src/index.js",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true
    }
  ],
  external: Object.keys(pkg.peerDependencies || {}),
  plugins: [
    babel(),
    resolve(),
    commonjs({ include: ["./index.js", "node_modules/**"] })
  ]
};

How can I force rollup to bundle and expand the require('./lib/ReactPropTypesSecret') call at build time?

user_1036813 · Answer

It turns out this was due to two problems:

Ordering of Rollup plugins. Resolve should come first, followed by commonjs, and then babel.

Babel should exclude node_modules. Having Babel parse them might leave commonjs and resolve unable to parse them to bundle dependencies.

The final config should be:

import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";

export default {
  input: "src/index.js",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true
    }
  ],
  external: Object.keys(pkg.peerDependencies || {}),
  plugins: [
    resolve(),
    babel({
      exclude: "**/node_modules/**"
    }),
    commonjs({ include: ["./index.js", "node_modules/**"] })
  ]
};

user_12059061 · Answer

In your package.json, include 'prop-types' within 'peerDependencies'
npm install

That fixed my problem: [!] Error: 'default' is not exported by node_modules\prop-types\index.js, imported by Component

Rollup Won't Bundle Proptypes Dependency

2 Answers