CSR flashes Loading component removing SSR content

[dalyr95]

The SSR render is working fine, but when the CSR renders, it flashes the loading component. I've looked at the similar issues but can't find a solution.

I have a webpack setup which exports a server.js file which express consumes.

• req is made, I flush the vendor/client chunks from stats.json
• App is renderedToString and then flushChunks is called
• chunks flushed to the page

Webpack config
externals is the filter as in the ReadMe
LimitChunkCountPlugin is set to maxChunks: 1

App.jsx

const universalImportOptions = {
  loading: <PageLoader />,
  error: <PageLoaderError/>,
  ignoreBabelRename: true,
  onError: (error, { isServer }) => {
    console.error(error);
  }
};

const Account = universal(() => import('./account/Account.jsx'), universalImportOptions);
const SignUp = universal(() => import('./signUp/SignUp.jsx'), universalImportOptions);
const SignIn = universal(() => import('./signIn/SignIn.jsx'), universalImportOptions);

It was universal(import(xyz) but looking at the other issues for this, functions was suggested as a solution to no avail.
Also added ignoreBabelRename as it wasn't finding the chunks before

The server is transpiled via Babel as well

.babelrc

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env", {
        "debug": false,
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  // Only use node polyfills for server files, no need for IE11 support on the server
  "overrides": [{
    "test": "./src/server",
    "presets": [
      [
        "@babel/preset-env", {
          "debug": false,
          "modules": false,
          "useBuiltIns": "usage",
          "corejs": 3,
          "targets": "node 12"
        }
      ],
      "@babel/preset-react",
      // Below wasn't part of the original config but tried this
      "plugins": [
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-exponentiation-operator",
      "syntax-dynamic-import",
      "transform-async-to-generator",
      [
        "universal-import", {
          "babelServer": true
        }
      ]
      // End
    ]
  }],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-exponentiation-operator",
    "syntax-dynamic-import",
    "transform-async-to-generator",
    "universal-import"
  ]
}

package.json

    "@babel/core": "^7.8.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
    "@babel/preset-env": "^7.8.6",
    "@babel/preset-react": "^7.8.3",
    "@babel/register": "^7.8.6",
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-universal-import": "^4.0.0",
    "react-universal-component": "^4.0.1",
    "webpack": "^4.42.0",
    "webpack-bundle-analyzer": "^3.6.0",
    "webpack-cli": "^3.3.11",
    "webpack-flush-chunks": "^2.0.3",

Also tried clearChunks() as in the ReadMe and <ReportChunks report={chunkName => chunkNames.push(chunkName)}>. Although I'm not sure I was using it correctly, is it just meant to be an empty array as per let chunkNames = []?

Any help would be appriciated as I can't seem to solve it.

[dalyr95]

On the client, the modCache is always empty, which reminded me of this issue #17 (comment)

as I was just dumping what flushChunks gave me onto the page and the Chunk JS was always last, so by reversing the order, it's stopped this issue as the modCache has the entry!

Now on prod, react router is complaining about (index):136 Error: Invariant failed: You should not use <withRouter(t) /> outside a <Router> but not on dev 🙄