Cannot find module 'react-is'

[benjgil]

Relevant for bit components using styled-components

TL;DR - you need to add react-is as a peerDependency in your workspace.jsonc file.

Full Details

The problem

peerDependencies are packages which you don't want to re-install when you consume a package/component (this can cause duplication and conflicts between multiple versions of the same package), and can be safely assumed to already be present in the consuming application. When you install packageA in a workspace, npm will also install its dependencies so that packageA will work - but, it will not install peerDependencies as they are assumed to already be in your workspace.

Packages which can be assumed to be in a workspace are e.g. react in a react application, angular-cli in an angular app, etc.

But if you add the wrong package as a peerDependency - e.g. if you cant assume with enough confidence that the consuming app will already have a copy of that package - then you end up with missing modules. Which is what happens with react-is and styled-components.

When installing styled-components in a bit component (or any non-bit consuming app), npm won't install react-is, or add it to the dependency tree of the component using styled-components because it's a 'hidden' peerDependency of styled-components. As react-is isnt ubiquitous enough to be present in most bit components, it therefore won't be loaded by npm or added to the component's dependencies.
In that case, react-is will be unknown when your bit composition tries to use styled-components in a component example.

NOTE this may not be a problem in your local workspace if you're for instance running bit inside an existing workspace which happened to have react-is installed already. Local bit commands such as bit start or bit test use the local node_modules so they will be able to find react-is.

The bit tag and bit build commands create an isolated capsule on your machine for each component, to make sure that they will function as expected when shared outside of the authoring workspace. At this point, react-is will certainly not be present and you'll get the above error.

Solution

The solution is to add react-is as a peerDependency for whatever components may be using styled-components (or just for the whole bit workspace if all components are assumed to need it). In this case, when bit needs to create a 'consuming app' environment, e.g. for compositions, it will know to install react-is and you won't get the error from the title of this discussion.
See here for details on adding dependencies via the workspace.jsonc.