CSR flashes Loading component removing SSR content

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.

faceyspacey / react-universal-component

CSR flashes Loading component removing SSR content #208