Styled Components not working

I was trying to adopt WMR in a personal project but kept running into issues. I’ve found that it has something to do with styled-components, but I’m not sure what’s happening.

Error (in browser)

Uncaught SyntaxError: The requested module '/@npm/react-is' does not provide an export named 'typeOf'

Steps to Reproduce

• Run npm init wmr
• Run npm i styled-components
• Import styled-components into the index.js file, import styled from 'styled-components';
• Run npm start, notice the page does not render and the error in the console

[developit]

Alright, I finally chased this one down. It’s a bug in styled-components, which uses a fairly old version of Rollup’s commonjs plugin to generate its ESM bundles that is just producing a nonsensical import:

import { typeOf } from 'react-is';  // incorrect, fails everywhere except Webpack

They’d originally told folks to fix this in their own configurations, but having this be broken by default doesn’t seem adequate. Instead, I’ve submitted a PR that implements the correct import generation in their build setup:

https://github.com/styled-components/styled-components/pull/3367

One thing I did find while digging is that this import was broken in 5.1.0 - styled-components@5.0.1 should work.

[marvinhagemeister]

@damianobarbati The has fix tag is incorrect, I think we forgot to remove it.

I’ve been working on revamping the npm plugin and on the commonjs handling over the past days and got it to render. There is a bit of remaining work to be done before this can be PR’ed, but it’s progressing well so far.