fix(package.json): fix react-router-dom error on production build

[umifriedrice]

Degraded react-router-dom to 4.3.1. from 5.0.0 to solve error below on production build

Error: Invariant failed: You should not use <Route> outside a <Router>

[salmanalfariz24]

I'll add more description for those who want to debug the error

Motivation

Because of react-router-dom has a dependency problem, we decide to up the version to 5.0.0. But after a couple of times debuging, we notice another bug in version 5.0.0, which cause staging and production build to break, spitting this error:

Error: Invariant failed: You should not use <Route> outside a <Router>

which is why we decide to down grade react-router-dom dependency version from 5.0.0 to 4.3.1, after the library itself fix its dependecy problem.

The root cause of this issue is still vague, but may be cause by react & react-dom version 16.8.0 incompatibility with react-router-dom version 5.0.0. Since react-router-dom itself have a dependency problem previously & webpack route bundling depends on multiple dependecy, its hard to determine what cause this error. This error only detectable after we upgrade the react version from 16.6.0 to 16.8.0.

Note:
To quick fix this issue without any changes, you need to install react-router-dom version 4.3.1 as your application dependency, this make node use this version instead the one in treats dependency.

Related react router issue:

• Invariant failed: You should not use Route outside a < Router > Webpack production remix-run/react-router#6738
• Context mismatch issue during SSR remix-run/react-router#6722
• react-router-config - You should not use <Switch> outside a <Router> (it is inside a Router!) remix-run/react-router#6679

How Has This Been Tested?

Below are the steps to reproduce the error:

1. Install create-treats-app package globally.
2. Create an app (the treats package should have dependency of react & react-dom v16.8.0 and react-router-dom v5.0.0).
3. Run the following command to build and run in staging/production mode.

// add this in your package.json scripts to make it easy:
{
...
"deploy:staging": "treats build --env staging",
"deploy:production": "treats build --env production",
...
}

// staging build
treats build --env production

// production build
treats build --env production

// start the app
node ./dist/server.js

4. By default, the app should be in http://localhost:3000/

You follow try the steps below to fix the error by down grading the dependency of react-router-dom to 4.3.1, or adding react-router-dom version 4.3.1 to your app dependency:

1. Clone the treats repo.
2. use npm link to link the treats package to your app package.
3. down grade react-router-dom dependency to 4.3.1.
4. Delete yarn.lock & node_modules in your app directory.
5. perform a clean install of package using yarn install (suggested).
6. Run you app using previous command.