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.

Cannot read property 'data' of undefined

See original GitHub issue

I’m using Goober with Preact (and Twin), and I’m having some difficulties making Goober play ball with Shadow DOM.

When I try to run something like this:

const shadowRoot = document.getElementsByTagName('app-shadow-section')[0] || false;
if( shadowRoot ) {
  goober.css.call({ target: shadowRoot }, `color: red !important;`);`
}

…it does correctly add the styles (color: red !important;) to the shadow component (app-shadow-section), but it also gives a console error that kills the app:

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
    at goober.modern.js:1
    at s (goober.modern.js:1)
    at Object.p (goober.modern.js:1)
    at a (goober.modern.js:1)
    at p.constructor (goober-global.modern.js:1)
    at p.M [as render] (preact.module.js:1)
    at I (preact.module.js:1)
    at m (preact.module.js:1)
    at I (preact.module.js:1)
    at m (preact.module.js:1)

(As an aside, if I try to get the styles from a shadow component (const styleTag = ``<style id="_goober">${goober.extractCss( shadowRoot )}</style>``;) I get a similar error:

goober.modern.js:1 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

In both cases, the shadow component exists in the DOM (as I can console log its dom node, and see the style correctly applied to it). I thought it might be related to lifecycle (etc) so tried the same code in useEffect, but the results are exactly the same.

Issue Analytics

State:
Created 2 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

joneslloydcommented, Apr 19, 2021

Oops, sorry about that. The ENV vars aren’t secret or anything; rather, there were different ones for local development.

Try creating a .env file in the project root with:

DATA_API=https://widget.mobalytics.gg/lol/graphql/v1/query
SQUIDEX_API=https://widget.mobalytics.gg/league/gql/static/v1
CDN_URL=https://cdn.mobalytics.gg

I will also try to get a codesandbox together later

1reaction

joneslloydcommented, Apr 19, 2021

Hey – I have the public repo itself if that helps?

But I can put it onto CodeSandbox if that’s easier?

(Note: In this repo I’ve hacked together a kind-of workaround in /src/widget/index.js by manually moving the CSS from the <head> to inside the Shadow DOM, via pure JavasScript).

In an earlier version, inside the same useEffect function, I set goober.css.bind and goober.styled.bind, which weren’t working for me.