Duplicate react app in react devtools

Hello,

I need help with this strange behaviour. I was updating webpack 4 to webpack 5 and react-loadable to loadable-components. Now when app is running, React Devtools is showing duplicate app. I have no idea why.

All details are here

If someone had similar problem and know how to fix it, please, Im searching for solution almost week and something.

Thank you

Edit: this is how we render app on BE side

import * as React from 'react'
import * as cs from 'react-intl/locale-data/cs'
import * as en from 'react-intl/locale-data/en'
import * as sk from 'react-intl/locale-data/sk'

import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'
import { IntlProvider, addLocaleData } from 'react-intl'
import { Provider, connect } from 'react-redux'

import ReactDOMServer from 'react-dom/server'
import { ReduxStateTypes } from 'src/redux/States'
import Route from 'src/app/share/Route'
import ScrollToTop from 'src/components/common/auxiliary_components/ScrollToTop'
import { StaticRouter } from 'react-router-dom'
import { Store } from 'redux'
import path from 'path'

const localeData = require('locales/data.json')

addLocaleData([...en, ...cs, ...sk])

// Mapping method for ConnectedIntlProvider
const mapStateToProps = (state: ReduxStateTypes.DefaultAppState) => ({
  locale: state.app.language,
  messages: localeData[state.app.language],
})

// Custom IntlProvider that takes locale and messages from main Redux store
const ConnectedIntlProvider = connect(mapStateToProps)(IntlProvider)

const context = {}
const RenderApp = (
  url: string,
  store: Store<ReduxStateTypes.DefaultAppState>,
  staticMarkup?: boolean,
): [string, string, string, string] => {
  const extractor = new ChunkExtractor({ statsFile: path.resolve('./dist/public/client/loadable-stats.json') })

  const renderFn = staticMarkup ? ReactDOMServer.renderToStaticMarkup : ReactDOMServer.renderToString
  const html = renderFn(
    <Provider store={store}>
      <ConnectedIntlProvider>
        <StaticRouter context={context} location={url}>
          <ChunkExtractorManager extractor={extractor}>
            <ScrollToTop>
              <Route />
            </ScrollToTop>
          </ChunkExtractorManager>
        </StaticRouter>
      </ConnectedIntlProvider>
    </Provider>,
  )
  const scriptTags = extractor.getScriptTags()
  const linkTags = extractor.getLinkTags()
  const styleTags = extractor.getStyleTags()

  return [html, scriptTags, linkTags, styleTags]
}

export default RenderApp

<Route /> is component, where is router, switch etc. There are loaded app components, for example:

const LoadableRegister = loadable(() => import(/* webpackChunkName: 'register-container' */ 'src/components/login/RegisterContainer'))

and here are 2 scripts from package.json, which we use to run app

"dev:client": "webpack serve --config config/dev.client.webpack.js --progress --color",
"dev:server": "npm run build:css && webpack --config config/dev.server.webpack.js --progress --color --watch",

[jenniredfield]

I’m just guessing here, but why do you point to the script bundle directly on your html string?

    ${
      process.env.NODE_ENV === 'production'
        ? `<script src="/client/${foundMain[0]}" defer></script>`
        : '<script src="/client/bundle.js" defer></script>'
    }

I thought loadable took care of everything with the scriptTags variable

[LadIQe]

yes, Im closing now