`Cannot read properties of undefined (reading 'width')` on main

[Danielku15]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Seems #11010 broke something unexpectedly? If I build the website on the current main state I get a:

Cannot read properties of undefined (reading 'width')

Building the website with --no-minify I can see its somewhere in the ideal-image-plugin
.

Maybe a side effect of #11010 ?

Reproducible demo

https://github.com/facebook/docusaurus/

Steps to reproduce

1. yarn build:website:en && yarn serve:website
2. Open http://localhost:3000/docs/playground

Expected behavior

No error.

Actual behavior

Cannot read properties of undefined (reading 'width')

Your environment

• Public source code: https://github.com/facebook/docusaurus/
• Public site URL: https://deploy-preview-11017--docusaurus-2.netlify.app/docs/playground (noticed on my PR, but the problem is not related to my changes).
• Docusaurus version used: main
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 134
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.

[slorber]

I'm not seeing this error in production or locally

No error here for me: https://docusaurus.io/showcase

Can you explain how to reproduce this in more details?

Have you tried running yarn install and docusaurus clear

Is it only locally? Only in prod mode?

---

More likely caused by this PR, since I removed some componentDidMount + setTimeout code that I thought would not be needed: #11014

I'd like to avoid re-introducing that code though, so would be happy to be able to reproduce the issue reliably and find another way to fix it.

[Danielku15]

Does docusaurus.io run the website using the code from main? Strange that it doesn't happen for you. 🤔 The problem happens for me on main and all my PRs (Netlify deploys). The error is not on /showcase but on /docs/playground. The reproduction steps are above, but to be sure I again did:

1. Clone repo clean
2. yarn && yarn build:website:en && yarn serve:website
3. Open http://localhost:3000/docs/playground

I opened an empty PR to let Netlify build and deploy the current state and I see the error here:

https://deploy-preview-11025--docusaurus-2.netlify.app/docs/playground

Tested on following envs:

• Windows 11 Chrome 134 ❌ Error
• Windows 11 Firefox 136 ❌ Error
• Windows 11 Edge 134 ❌ Error
• Windows 11 Opera 117 ❌ Error
• MacOS Sequoia Safari 18.1 ❌ Error
• iPad 10th iOS 16 Safari ✅ Working
• iPhone 14 iOS 16 Safari ❌ Error
• Samsung Galaxy S13 - Android 13 Chrome ❌ Error

---

I narrowed down the problem: It comes from accessing this.state.dimensions after this.setState. As you might know better than me: setState is not immediate and might be delayed. Then in onEnter the state is not yet updated and dimensions is undefined.

Could be that it worked before because the old Waypoint code delayed the initial checks and onEnter events a bit more?

[slorber]

Ah yes I can see it now

Thanks for the repro, will investigate soon

[slorber]

Could be that it worked before because the old Waypoint code delayed the initial checks and onEnter events a bit more?

Yes this is what I'm referring to when I mentioned componentDidMount + setTimeout

[slorber]

Should be fixed in #11026, let me know if you still see the problem

[Danielku15]

Checked on Netlify and built your branch locally. Problem is fixed with #11026 🥳