styled-components not working.

[Jaikant]

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

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

[Howard86]

Can you provide a minimal version of your code? styled-components works pretty well in my Blog (using Next.js with Rebass for quick bootstrapping)

for example, for Nav component

[justin-calleja]

NOTE looks like rebass is incompatible with snowpack which is how I'm running the below. I managed to get the "hello rebass" example working in a create react app.

@Howard86 I just started having a look at rebass and the following reproduces this issue:

https://github.com/justin-calleja/rebass-styled-components

Thanks

Same issue if I install theme-ui as suggested in docs:

emotion-theming is different. It gives:

Uncaught SyntaxError: The requested module '../_snowpack/pkg/emotion-theming.js' does not provide an export named 'ThemeProvider'

It is requiring this:

  module.exports = require("./emotion-theming.cjs.dev.js");

Whose contents is this:

'use strict';

throw new Error("`emotion-theming` has been removed and all its exports were moved to `@emotion/react` package. Please import them like this `import { useTheme, ThemeProvider, withTheme } from '@emotion/react'`.");

Looks like this page needs updating: https://rebassjs.org/getting-started/

Then if I install @emotion/react:

import { ThemeProvider } from '@emotion/react';

I get the same error like the others:

Uncaught TypeError: defaultShouldForwardProp is not a function

[Howard86]

hey @justin-calleja

In general, the following works pretty well with my next.js project.

import { Box } from "rebass/styled-components";

I have quickly tried your project and got the same error. I am afraid this is probably not related to rebass itself.

rebass/flexbox use defaultShouldForwardProp which is a helper function in styled-system, maybe you should leave an issue regarding to snowpack there.