Cannot read property 'style' of null

[mkosir]

Cannot read property 'style' of null

[nwesthoff]

Hey @mkosir, I'm having the same issue (with Next.js), so I've taken the liberty to jump in on this issue. I'm not 100% sure whether this is an SSR issue, but I wasn't able to reproduce with plain React and setInterval() to conditionally unload it.

🐛 Issue/Bug Report Template

Describe the bug
Getting console error:

Uncaught TypeError: Cannot read property 'style' of null
    at i.resetWrapperElTransform (react-parallax-tilt.es5.js?6058:1)
    at e.renderFrame (react-parallax-tilt.es5.js?6058:1)

To Reproduce
Steps to reproduce the behavior:

1. Conditionally use Tilt component
2. Unload <Tilt> components it client-side (like in useEffect)
3. Refresh page

Expected behavior
Not throw an error when using react-parallax-tilt dynamically (in a server side rendered environment)

Link to demo (required)
CodeSandbox

Code snippets
Conditionally rendering as such. Loaded is triggered in useEffect.

{loaded ? null : (
        <Tilt>
          <div>
            <h1>React Parallax Tilt</h1>
          </div>
        </Tilt>
      )}

Environment

• OS: MacOS Big Sur
• Browser: Chrome 88.0.4324.182
• Version: "react-parallax-tilt": 1.4.89 (latest)

Hope this helps @WaqqarSuleman as well :)

[nwesthoff]

Seems like that does resolve it for me :)

Forked Sandbox

[WaqqarSuleman]

Great, thx @nwesthoff
@WaqqarSuleman can you check if the latest release 1.4.90 is also working for you as expected?

@mkosir The latest version is working as expected. Thanks!

[mkosir]

Hi @WaqqarSuleman thanks for the issue report, can you please fill out the issue template (library version you are using, demo link).

[WaqqarSuleman]

Hey @mkosir, I'm having the same issue (with Next.js), so I've taken the liberty to jump in on this issue. I'm not 100% sure whether this is an SSR issue, but I wasn't able to reproduce with plain React and setInterval() to conditionally unload it.

🐛 Issue/Bug Report Template

Describe the bug
Getting console error:

Uncaught TypeError: Cannot read property 'style' of null
    at i.resetWrapperElTransform (react-parallax-tilt.es5.js?6058:1)
    at e.renderFrame (react-parallax-tilt.es5.js?6058:1)

To Reproduce
Steps to reproduce the behavior:

1. Conditionally use Tilt component
2. Unload <Tilt> components it client-side (like in useEffect)
3. Refresh page

Expected behavior
Not throw an error when using react-parallax-tilt dynamically (in a server side rendered environment)

Link to demo (required)
CodeSandbox

Code snippets
Conditionally rendering as such. Loaded is triggered in useEffect.

{loaded ? null : (
        <Tilt>
          <div>
            <h1>React Parallax Tilt</h1>
          </div>
        </Tilt>
      )}

Environment

• OS: MacOS Big Sur
• Browser: Chrome 88.0.4324.182
• Version: "react-parallax-tilt": 1.4.89 (latest)

Hope this helps @WaqqarSuleman as well :)

Thanks a lot for demonstrating this issue. I am using the library with plain React(so no SSR). Still facing the aforementioned issue. Hope it gets resolved soon.

[mkosir]

Hi @nwesthoff, thanks for providing detailed bug report with reproducible demo link!
This issue is a little harder to pinpoint but for a start I reverted some changes that were made for reducing npm package size, can you try out the newest version 1.4.90?

[mkosir]

Great, thx @nwesthoff
@WaqqarSuleman can you check if the latest release 1.4.90 is also working for you as expected?