ReactJS library gives "ReferenceError: __extends is not defined" in projects that export it when altering rollup.config.js's commonjs function

Question

I am working on a project and we also have a library project that hold all the common components used across the project. In this library I had to add a component that uses materialUI. When I was trying to export that component I was getting the error :

[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules\@material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "@babel/runtime/helpers/esm/typeof";
2: import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE 11 support

Now I was able to solve this by altering the commonjs function from rollup.config.js like this:

commonjs({
      include: "node_modules/**",
      namedExports: {
        "node_modules/react-is/index.js": ["ForwardRef", "Memo"],
      },
    }),

This in turn has created another error. When I reinstalled the library on the main project straight from the start I get the error.

   Uncaught ReferenceError: _extends is not defined
at exactProp (index.es.js:14590)
at Module.<anonymous> (index.es.js:18939)
at Module../node_modules/bt-react-lib/dist/index.es.js (index.es.js:25529)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/components/main/Main.js (Dashboard.js:52)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/App.js (log$:24)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/index.js (index.css?02e3:45)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.1 (objects.js:1)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1

Has to do with materialUI again I suppose. Anyone had this before?

Answer 1

You should probably treat material as a peer dependency, together with react and react dom. Here is an example of a boilerplate that helped me on the same issue.

First modify package.json and move material to "peerDependencies": {... } then you'll have to install rollup-plugin-peer-deps-external and add it to your rollup file. Now you can undo the named exports and you should be done.