Direct link to docs shows blank page on mobile when in production / build mode

[dbismut]

Short note: I've been reporting several issues lately, and forgot to show my appreciation for this project. I also discovered xstyles which looks super promising!

🐛 Bug Report

In production / build mode, accessing a docs page on mobile directly (without going through the homepage) shows a blank page.

To Reproduce

Go here: https://use-gesture.netlify.app/docs/extras/ with a viewport width set to anything strictly under 768px.

Expected behavior

The content of the page should show.

Note that this problem doesn't happen in development mode.

Here is a DOM extract in development mode (correct):

Here is a DOM extract in production mode (incorrect):

As you can see, the class passed to the content div is incorrect in production mode (as they are the same as the sidebar). I wasn't able to trace down the problem.

Link to repl or repo

This is a full-fleshed repo (that has code line highlights, and a properly working sidenav — see #17):
https://github.com/pmndrs/react-use-gesture/tree/master/documentation

But any out-of-the box updated repro with a correct 404 page (see #21) will show the same problem.

Run npx envinfo --system --binaries --npmPackages smooth-doc,gatsby,react,react-dom --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 10.15.7
 - CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
 - Memory: 99.66 MB / 32.00 GB
 - Shell: 5.7.1 - /bin/zsh
## Binaries:
 - Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
 - Yarn: 1.22.4 - /usr/local/bin/yarn
 - npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
## npmPackages:
 - gatsby: ^2.24.85 => 2.24.85 
 - react: ^17.0.1 => 17.0.1 
 - react-dom: ^17.0.1 => 17.0.1 
 - smooth-doc: ^5.1.1 => 5.1.1 

[dbismut]

I've managed to narrow down the issue to these lines:

smooth-doc/smooth-doc/src/components/DocLayout.js

Lines 144 to 146 in 2b47cf7

	<Dialog {...dialog} as={SidebarDialog}>
	{children}
	</Dialog>

Commenting them out fixes the issue (but you lose the mobile menu).

Replacing it with:

<Dialog>{children}</Dialog>

Doesn't fix the issue so it really looks there's an issue with how the <Dialog/> component is being used.

EDIT

Turns out that setting useDialogState({ animated: true, modal: false }) in the line below fixes the issue but to the expense of the list mentioned in Reakit docs.

smooth-doc/smooth-doc/src/components/DocLayout.js

Line 141 in 2b47cf7

const dialog = useDialogState({ animated: true })

In any case, it seems like there's no use in adding the <Portal /> element as it's already used internally by default.

[gregberge]

Hmm I will give a look, thanks.