styled-components not working.

Author: JaikantCreated Jul 7, 2020Updated Feb 28, 2021

styled-components does not work. Emotion works.

The versions are

    "rebass": "^4.0.7",
    "styled-components": "^5.1.1"

I have a simple component like below, when I import the styled-components version it crashes. Whereas if I do an import without styled-components(emotion). It works allright. This is for SSR with nextJS configured with styled-components.

The componet is

bash

import * as React from 'react';
import { Box } from 'rebass/styled-components'

const Header: React.FC = (props) => {
  return (
      <Box>
        Hi this is a box
      </Box>
  )
}

export default Header;

The error is :

TypeError: (0 , _styledComponents.default) is not a function
./node_modules/reflexbox/styled-components/index.js
./node_modules/reflexbox/styled-components/index.js:40
  37 |   return (0, _css["default"])((0, _css.get)(theme, tx + '.' + variant, (0, _css.get)(theme, variant)))(theme);
  38 | };
  39 | 
> 40 | var Box = (0, _styledComponents["default"])('div', {
  41 |   shouldForwardProp: _shouldForwardProp["default"]
  42 | })({
  43 |   boxSizing: 'border-box',
View compiled
__webpack_require__
./webpack/bootstrap:855
  852 | // Execute the module function
  853 | var threw = true;
  854 | try {
> 855 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  856 | 	threw = false;
  857 | } finally {
  858 | 	if(threw) delete installedModules[moduleId];
View compiled

Source: rebassjs/rebass

View original on GitHub View discussion on GitHub