lyft / clutch

Description

After creating new gateway with make scaffold-gateway command, upon starting it there were some errors on the frontend.

Expected Behavior

Starting new gateway project should result in working frontend.

Actual Behavior

New gateway project's frontend is not working.

Version

d24c8d8

Other Context

Resolution

This problem was tracked down to be due to the version of react-router that was installed in the new gateway project.
This project has "react-router": "^6.0.0-beta" configured in the frontend/packages/core/package.json file. However, at the time it was added this resulted in the version 6.0.0-beta.0 to be locked in yarn.lock file.

Since the new gateway project depends on the @clutch-sh/* modules, it tries to resolve "react-router": "^6.0.0-beta" version, which currently resolves in locking 6.0.0-beta.8 version. As it can be observed, there were 8 beta releases for the react-router, and at some point there were some incompatible changes.

I've solved this problem by just locking 6.0.0-beta.0 version, however same issue will be present for anyone other trying to create new gateway.
Initially I though to create a PR for this, however due to the nature of problem I figured some other solution from mine (which was just to have exact version in package.json) might be preferred.

I am seeing the same with new custom gateways created from the scaffolder.
This manifests itself with the frontend not loading, and the following logged in the console:

Uncaught Error: Absolute route path "/" nested under path "/*" is not valid. An absolute child route path must start with the combined path of all its parent routes.

@clutch-sh/core has a dependency on "react-router": "^6.0.0-beta" and "react-router-dom": "^6.0.0-beta".
This causes the custom gateway to pull the latest version, currently 6.2.1.

It looks like the culprit is 6.0.0-beta.4 that introduced a change in how nested paths behave...
remix-run/react-router#7992
remix-run/react-router#7335

I believe this is the nested route that falls foul of the new behaviour...

clutch/frontend/packages/core/src/AppProvider/index.tsx

Line 95 in 1bfc09d

You can work around this by using a Yarn selective dependency resolver to resolve the react-router and react-router-dom packages to the required working version, by adding the following to the frontend package.json...

"resolutions": {
  "**/react-router": "6.0.0-beta.0",
  "**/react-router-dom": "6.0.0-beta.0"
},

I tried 6.0.0-beta.3 but it introduces another issue that breaks route navigation, where each requested route is cumulatively appended on to the previously requested routes...

scaffolding: 'react-router' version '6.0.0-beta.8' not working for new gateway