Custom React Component Library - jest 'cannot find module react'- testing-library, rollup

Question

I'm building a custom react component library to share with other applications. I'm using rollup and following this blog and a few others: https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe

The relevant snippet of my rollup config is as follows:

export default [
   {
    input: "src/index.ts",
    output: [ { file: packageJson.main, format: "esm", sourcemap: true } ],
    plugins: [ peerDepsExternal(), resolve(), terser() ],
    external: ["react", "react-dom"]
    }
]

In my package.json I've moved react and react-dom from 'devDependencies' to 'peerDependencies'. My abbreviated package.json:

{
 "name": "custom components",
 "version": "1",
 "devDependencies": {
  ...stuff, (but not react/react-dom)
  },
 "peerDependencies": {
   "react": ">=16.8.0",
   "react-dom": ">=16.8.0"
  },
 "main": "dist/esm/index.js",
 "files": ["dist"]
}

Then using npm link I've imported my component library into another app which is using CRA and react-testing-library.

So far this works. I'm able to render my common components as expected.

However it seems like moving react/react-dom out of devDependencies is making my jest tests fail in both projects. In both cases jest cannot find react. The Jest output in my CRA that imports the components is as follows:

Test suite failed to run

Cannot find module 'react' from 'index.js' //<-- this is the index of the component library

However, Jest was able to find:
    .../MyComponent.tsx

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js',...etc] (defaults)

And when I run my tests in my common component library:

Test suite failed to run

Cannot find module 'react' from 'MyComponent'

import React from 'react';
^

I'm not sure how exactly to get around this. If I move react/react-dom back to devDependencies, the tests will run successfully, but then any component using react state will fail to render due to multiple copies of React in the project.

Could this be an issue because I'm using npm link as opposed to actually publishing the application to npm and installing or is this an issue with my rollup config/jest config/package.json? Any help would be appreciated.

helloitsjoe · Accepted Answer · 2022-05-10T00:19:40.803

react and react-dom should be included in both devDependencies and peerDependencies of your library.

Including them in devDependencies makes them available when developing (and when running tests), but they won't be included in the library when you bundle them with Rollup (which is what you want).

Including them in peerDependencies tells any consuming applications "you must have these dependencies at the specified version range," but again, Rollup doesn't include them in the library bundle.

If you only include them in peerDependencies, they aren't installed when developing the library or running tests, although this might no longer be true if you're using npm v7.

You can run into the problem of having multiple versions of React in your project if your app includes them at a different version than your library, but if both the app and the library have the same version range you shouldn't have that problem.

This worked for me. I was getting some issues related to having multiple instances of react but I believe my issue was specifically because I was using npm link and had not re run npm install after updating the dependencies. In case anyone else sees this, I needed to correctly include react and react-dom in dev dependencies and peer dependencies then I deleted/ recreated node_modules. — Jerry, May 23 '22 at 19:02

Custom React Component Library - jest 'cannot find module react'- testing-library, rollup

1 Answers1