Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to use component with side effect as child component of styled component

See original GitHub issue

Environment

Using ejected CRA with latest version of linaria (1.3.1) and @reach/router

Description

I’m unable to use a <Link /> component as a child of a linaria styled component. I get strange, cryptic error messages like:

For reference, here is how it is configured:

By swapping out SidebarWrapper with a basic <nav /> tag, I’m able to compile without error. My Sidebar component is then imported and styled styled(Sidebar) in another file. If I remove all of the higher up styled elements, it compiles and runs fine. Does this mean that, nowhere in my styled component hierarchy am I allowed to have a component with side effects, like a <Link /> component?

Also, if I switch to doing css and create a classname to apply directly to my Sidebar component, it compiles but I get the following runtime error:

Uncaught TypeError: Cannot read property 'substr' of undefined
    at startsWith (utils.js:5)
    at resolve (utils.js:145)
    at index.js:460
    at index.js:83
    at updateContextConsumer (react-dom.development.js:16082)
    at beginWork (react-dom.development.js:16303)
    at performUnitOfWork (react-dom.development.js:20279)
    at workLoop (react-dom.development.js:20320)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19503)
    at renderRoot (react-dom.development.js:20433)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at batchedUpdates$1 (react-dom.development.js:21468)
    at Object.notify (Subscription.js:23)
    at Subscription.notifyNestedSubs (Subscription.js:65)
    at Provider.notifySubscribers (Provider.js:59)
    at Subscription.handleChangeWrapper (Subscription.js:70)
    at Object.dispatch (redux.js:214)
    at e (<anonymous>:1:40553)
    at redux-promise-listener.es.js:46
    at createEpicMiddleware.js:49
    at SafeSubscriber.dispatch [as _next] (redux.js:613)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:169)
    at Subscriber._next (Subscriber.js:99)
    at Subscriber.next (Subscriber.js:68)
    at MergeMapSubscriber.notifyNext (mergeMap.js:114)
    at InnerSubscriber._next (InnerSubscriber.js:21)
    at InnerSubscriber.Subscriber.next (Subscriber.js:68)
    at Notification.observe (Notification.js:27)
    at QueueAction.ObserveOnSubscriber.dispatch [as work] (observeOn.js:56)
    at QueueAction.AsyncAction._execute (AsyncAction.js:84)
    at QueueAction.execute (QueueAction.js:34)
    at QueueScheduler.AsyncScheduler.flush (AsyncScheduler.js:53)
    at QueueAction.schedule (QueueAction.js:29)
    at QueueScheduler.Scheduler.schedule (Scheduler.js:18)
    at QueueScheduler.AsyncScheduler.schedule (AsyncScheduler.js:37)
    at ObserveOnSubscriber.scheduleMessage (observeOn.js:62)
    at ObserveOnSubscriber._next (observeOn.js:66)
    at ObserveOnSubscriber.Subscriber.next (Subscriber.js:68)
    at MergeMapSubscriber.notifyNext (mergeMap.js:114)
    at InnerSubscriber._next (InnerSubscriber.js:21)
    at InnerSubscriber.Subscriber.next (Subscriber.js:68)
    at SwitchMapSubscriber.notifyNext (switchMap.js:103)
    at InnerSubscriber._next (InnerSubscriber.js:21)
    at InnerSubscriber.Subscriber.next (Subscriber.js:68)
startsWith @ utils.js:5
resolve @ utils.js:145
(anonymous) @ index.js:460
(anonymous) @ index.js:83
updateContextConsumer @ react-dom.development.js:16082
beginWork @ react-dom.development.js:16303
performUnitOfWork @ react-dom.development.js:20279
workLoop @ react-dom.development.js:20320
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:19503
renderRoot @ react-dom.development.js:20433
performWorkOnRoot @ react-dom.development.js:21357
performWork @ react-dom.development.js:21267
performSyncWork @ react-dom.development.js:21241
batchedUpdates$1 @ react-dom.development.js:21468
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
notifySubscribers @ Provider.js:59
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:214
e @ VM3534:1
(anonymous) @ redux-promise-listener.es.js:46
(anonymous) @ createEpicMiddleware.js:49
dispatch @ redux.js:613
SafeSubscriber.__tryOrUnsub @ Subscriber.js:240
SafeSubscriber.next @ Subscriber.js:169
Subscriber._next @ Subscriber.js:99
Subscriber.next @ Subscriber.js:68
MergeMapSubscriber.notifyNext @ mergeMap.js:114
InnerSubscriber._next @ InnerSubscriber.js:21
Subscriber.next @ Subscriber.js:68
Notification.observe @ Notification.js:27
ObserveOnSubscriber.dispatch @ observeOn.js:56
AsyncAction._execute @ AsyncAction.js:84
QueueAction.execute @ QueueAction.js:34
AsyncScheduler.flush @ AsyncScheduler.js:53
QueueAction.schedule @ QueueAction.js:29
Scheduler.schedule @ Scheduler.js:18
AsyncScheduler.schedule @ AsyncScheduler.js:37
ObserveOnSubscriber.scheduleMessage @ observeOn.js:62
ObserveOnSubscriber._next @ observeOn.js:66
Subscriber.next @ Subscriber.js:68
MergeMapSubscriber.notifyNext @ mergeMap.js:114
InnerSubscriber._next @ InnerSubscriber.js:21
Subscriber.next @ Subscriber.js:68
SwitchMapSubscriber.notifyNext @ switchMap.js:103
InnerSubscriber._next @ InnerSubscriber.js:21
Subscriber.next @ Subscriber.js:68
(anonymous) @ subscribeToPromise.js:7
Promise.then (async)
(anonymous) @ subscribeToPromise.js:5
subscribeToResult @ subscribeToResult.js:18
SwitchMapSubscriber._innerSub @ switchMap.js:75
SwitchMapSubscriber._next @ switchMap.js:62
Subscriber.next @ Subscriber.js:68
FilterSubscriber._next @ filter.js:50
Subscriber.next @ Subscriber.js:68
Notification.observe @ Notification.js:27
ObserveOnSubscriber.dispatch @ observeOn.js:56
AsyncAction._execute @ AsyncAction.js:84
QueueAction.execute @ QueueAction.js:34
AsyncScheduler.flush @ AsyncScheduler.js:53
QueueAction.schedule @ QueueAction.js:29
Scheduler.schedule @ Scheduler.js:18
AsyncScheduler.schedule @ AsyncScheduler.js:37
ObserveOnSubscriber.scheduleMessage @ observeOn.js:62
ObserveOnSubscriber._next @ observeOn.js:66
Subscriber.next @ Subscriber.js:68
Subject.next @ Subject.js:64
AnonymousSubject.next @ Subject.js:166
(anonymous) @ createEpicMiddleware.js:53
dispatch @ VM3534:1
./src/index.tsx @ index.tsx:48
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ serviceWorker.ts:143
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 21 more frames

Also - it appears that I also cannot style components that utilize react hooks down stream either. This is incredibly restrictive, is there any way around this?

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

mattonicommented, Mar 31, 2020

I also cannot right now, as I’ve unfortunately had to move away from linaria to styled-components as this made it impossible for me to use the library. I really appreciate you looking into all of the issues now though, I would love to see this library succeed and use it in my next project.

0reactions

jayucommented, Apr 28, 2020

I will reopen this if any reproduction will be provded

Top Results From Across the Web

FAQs - styled-components

In a React Native project using TypeScript, it is because you need to add @types/styled-components-react-native.

Problem accessing styled component nth-child - Stack Overflow

This is my component I want to access the AccountMenuItem children, I want to apply a higher height to the first and last...

How To Use Styled-Components In React - Smashing Magazine

In this article, you'll learn the basics of styled components and how to properly apply them to your React applications.

The styled-components Happy Path - Josh W Comeau

styled -components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it...

uncaught error: cannot create styled-component for ... - You.com

javascript import React, {Component} from 'react' import styled from ... callstack/linariaUnable to use component with side effect as child component of ...