Issues with context & styled-components in node module

[rovansteen]

I'm running in to an issue where I am using a private node module that contains small components that use styled-components and expect a theme to be set by the package that includes it. This was working fine in next@2.0.0-beta.17 but after upgrading to beta 26 it stopped working. The theme passed in to the component from the external package is just empty.

I've tried to reproduce this outside my project but failed to do so because it works fine when you define the components that use the theme inside the project itself. I've narrowed it down to a specific version, it works in beta 18 but breaks in beta 19. I've tried looking at the changes made in that release but couldn't find anything that would explain this.

Do you might have an idea what's changed that would have this effect?

[arunoda]

Try to reproduce it with the npm modules. You can install npm modules locally with file://<path-to-module-dir> (Doesn't work with yarn)

Those paths can be relative urls as well.
With this, we may could see the real problem.

[rovansteen]

When I move a component to a local npm module and install that using the file: path in my package.json it works fine. Also I noticed that the HTML rendered by the server contains the correct CSS and doesn't throw any errors, the error only appears on the client side. I'm really confused as to what's causing this issue.

This is the error stack I get when JS is enabled in the browser (so this is thrown after the JS runs in the client)

TypeError: Cannot read property 'base' of undefined
TypeError: Cannot read property 'base' of undefined
    at eval (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:14780:26)
    at eval (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:7845:90)
    at Array.reduce (native)
    at flatten (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:7838:17)
    at ComponentStyle.generateAndInjectStyles (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:14670:23)
    at _fn.generateAndInjectStyles (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:13751:33)
    at _fn.componentWillMount (eval at evalScript (http://localhost:3000/_next/-/commons.js:3256:3), <anonymous>:13771:43)
    at http://localhost:3000/_next/-/main.js:16675:23
    at measureLifeCyclePerf (http://localhost:3000/_next/-/main.js:16402:12)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:3000/_next/-/main.js:16674:9)

base is here a property on my theme object that is passed in as a prop to the component.

[rovansteen]

I've been digging in the code of styled-components a bit and I think the issue is related with context. It subscribes to a "channel" on the context named __styled-components__ but that appears to be missing in the component loaded from my private npm module.

So basically this if statement fails, and then it looks for a theme passed in as prop, which is obviously not there, resulting in an empty theme.

Did the bump from beta18 to beta19 caused any changes to the context that could cause this?

[timneutkens]

@rovansteen 8b94534 this was added in beta.19. I'm not sure if it is related. But there were some fixes on it since then. So could you please try the latest beta?

[rovansteen]

@timneutkens unfortunately it's still broken. I've tried something simple with the styled-components example in the repo and it breaks when you add a theme. I created a separate issue for that #1416 I hope that fixing that also fixes this problem.

[rovansteen]

Closing this for now because I am not able to setup a minimal reproduction of the issues I ran into. Might try next.js for this project later, keep up the good work!