React: Using lazy components within react router resulting in strange behavior

[kmcaloon]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I am using React.lazy and react-router-dom to dynamically load/render components within routes.
If the app initially loads at a route with a non-lazy component, as soon as I click on link to a route with a lazy component the entire page flashes and refreshes at that route. If the app initially loads at a route with a lazy component, as soon as I click on a link to another lazy component route, the app throws the following error: Uncaught Invariant Violation: Unable to find node on an unmounted component.

Here is a portion of the code in question:

const DashScreen = React.lazy( () => import( 'screens-pilots/DashScreen' ) );
const SingleWingScreen = React.lazy( () => import( 'screens-pilots/SingleWingScreen' ) );

...

  <Switch>
    <Route
    path={ '/home' }
    render={ router =>
      <DashScreen router={ router }/>
    }
    />
    <Route
    path={ '/wings/:slug' }
    render={ router =>
      <SingleWingScreen
      router={ router }
      data={ p.AppState.is_enterprise_pilot ? p.AppState.company.wings : null }
      />
    }
    />
  </Switch>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Not possible at the moment, but if necessary will try to produce a minimal demo. For what it's worth I am using a customized cra with the following package.json

{
  "name": "hi-there",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@sentry/browser": "^4.5.3",
    "antd": "^3.13.2",
    "await-to-js": "^2.1.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.0",
    "classnames": "^2.2.6",
    "craco-preact": "^1.1.0",
    "date-fns": "^1.30.1",
    "directory-named-webpack-plugin": "^4.0.0",
    "js-cookie": "^2.2.0",
    "material-ui": "^0.20.2",
    "node-sass": "^4.11.0",
    "rc-queue-anim": "^1.6.11",
    "react": "^16.8.1",
    "react-cache": "^2.0.0-alpha.1",
    "react-dom": "^16.8.1",
    "react-helmet": "^5.2.0",
    "react-loadable": "^5.5.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.5",
    "react-use": "^5.3.0",
    "reactstrap": "^7.1.0",
    "sass-rem": "^2.0.1",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpackbar": "^3.1.5"
  },
  "scripts": {
    "start": "nodemon -w craco.config.js -w ./src/lib/ant-theme.less --exec 'craco start'",
    "start-live-api": "REACT_APP_API=production craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@craco/craco": "^3.4.1",
    "craco-antd": "^1.10.0",
    "nodemon": "^1.18.10"
  }
}

What is the expected behavior?
Smooth navigation. React Loadable is currently working as expected with this exact setup when I swap it in for React.Lazy().

[threepointone]

Can't say much without a reproducible demo/testcase. I also recommend you post this at https://github.com/ReactTraining/react-router/issues.

[kmcaloon]

Thanks, I was actually able to solve the problem by putting my <Switch> component directly within another <React.Suspense> component. I was using suspense higher up in the tree but looks like I neglected one here.