Docs navigation broken on mobile

[mjackson]

Shrink your browser down to < 600px so you see the mobile optimized page (single column) and click on any of the navigation. You'll get an error like this in the console:

I tracked down the error, and it looks like we may not be using the proper NODE_ENV when we build the website in production.

[mjackson]

Just noticed this was already reported in #6023.

[sag1v]

@mjackson I think after moving to react 16

this line:
comp._reactInternalInstance

Should be:
comp._reactInternalFiber

Not sure though 🤔

[sag1v]

@mjackson After playing around, the change i proposed above ⬆️ did help, however there is another error, now within react-css-property-operations/lib/CSSPropertyOperations.js.
There is no _currentElement property in component (again i think it's a conflict with the new react 16).
There is however a _debugOwner property.

I'm not sure what was the reason for using react-css-property-operations but it seems that it is abandoned and probably is not supporting react v16.

---

As a side note, I had a lot of errors while trying to run the website locally. seems like most of the paths to the modules in react-router-dom are off.
They are targeting to the root of react-router-dom instead to react-router-dom/modules

Just to name a few: ReactRouterDOMShim, generatePath, MemoryRouter and the list goes on...

I guess this should be on a different issue then.

Hope I helped 😉

[pshrmn]

@sag1v you have to run npm run build in the root so that the monorepo packages get built. I updated the CONTRIBUTING.md file earlier to reflect this, but as I mentioned in #6061, we should probably auto-build after install so that new contributors don't have to go looking for build instructions.

[mjackson]

I created an un-minified webpack build to try and figure out what is going on here (see attached) 🕵️

It looks like our bundle includes a process shim which is preventing process.env.NODE_ENV from being evaluated properly at build time, so the debugging code with the _debugID isn't being stripped out.

However, it also looks like we have a bundle within our bundle, probably because the Animated code isn't an actual dependency (it's just copied over from an older version of the library) 🙃

For example, you can see here that entry # 463 in the outer bundle actually exports a webpack bundle of the Animated library:

So I'm guessing we need to either a) fix that inner bundle and get the process shim out of it so the webpack DefinePlugin can do its job and replace all the process.env.NODE_ENV references or b) figure out which commit (git bisect, anyone?) caused this weird behavior and undo the regression.

I've uploaded my build here in case anyone would like to go poking around

👇
build.zip