styled-components' context doesn't work

💬 Questions and Help

When I wrap <Component /> with a Provider <ThemeProvider theme={theme} > in _app and then try to consume this theme or provider value it returns undefined instead of the provider value.

Please help, I have been 2 days debuging to find the issue and there is no luck

home.test.jsx

it('should renders home page', async () => {
    const { render} = await getPage({
         route: '/home',
          useApp: true
    });
    render();
    expect(screen.getByText('home'))
    expect(screen.getByText('child'))
});

_app.js

import React, {useContext} from 'react';
import styled, { ThemeProvider, ThemeContext } from 'styled-components';
import ThemJson from "../theme";

const StyledContainer = styled.div`
    background-color: ${props => { 
        console.log("PROPS IN STYLED COMPONENTS", props.theme);  // output is correct
        return props.theme.color.primary;
    }
};
`
const AppChild = () => {
    const theme = useContext(ThemeContext);
    console.log(theme) // Output correct
    return (<StyledContainer>home</StyledContainer>);
};

const MyApp = ({ Component }) => {
  return (
      <ThemeProvider theme={ThemJson}>
         <AppChild />
         <Component />
    </ThemeProvider>
  );
};
export default MyApp

home.jsx

import React, {useContext} from 'react';
import styled, {ThemeContext} from 'styled-components';

export const StyledContainer = styled.div`
    background-color: ${props => {
        console.log("PROPS IN STYLED COMPONENTS", props.theme); // ERROR can't red property theme of undefined
        return props.theme.color.primary;
    }
};
`

function Home(props) {
    const theme = useContext(ThemeContext);
    console.log(theme) // Wrong!! // theme is undefined
    return (
        <StyledContainer>
            child
        </StyledContainer>
    );
};

export default Home;

theme.json

{
    "color": {
        "primary": "red"
    }
}

[Meemaw]

@toomuchdesign I was just trying to make this work locally and I failed. I think its clear why the theme is undefined in “server” context if styled-components is not listed in nonIsolatedModules option.

However if it’s listed in nonIsolatedModules there will be a runtime error during SSR rendering. The problem is what if we list a module inside nonIsolatedModules it means that module becomes a client side module and can’t be “isolated”. This is problematic because then it wont work correctly in “server” context due to such expressions: https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L15 and fail at SSR render time.

As I see it its currently not possible to test applications that use styled-components at all. This is not good as this represents a big number of users.

While I don’t see short term solutions to our “client” vs “server” execution context problem (e.g. rendering in separate processes), I think this (and probably other use cases) would be possible if we had a ssr: boolean option. If that option is disabled:

ssr: false

We wouldn’t do the server render + hydrate, but just do the client side rendering. I quickly tried that locally and the styled-components example seemed to work.

[Meemaw]

@ThePicoNerd I have a feeling you need to patch-jest; or have you done that already?