Invalid element type

💬 Questions and Help

I am currently adding loadable-components in an SSR project. I got the below warning and the lazy component is not loaded

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: symbol.

Check the render method of `RouterContext`.
    in RouterContext (created by Router)
    in Router
    in Provider
    in HelmetProvider
    in ApolloProvider
    in ErrorBoundary

I suspect it is the same reason as #310 because I am currently using react-router v3, but not sure if there is a workaround for so?

Below is my route config

{
    path: 'about(/)',
    getComponent: loadable(() => import('./containers/AboutPage')),
},

Client babel config:

{
  presets: [
    [
      '@babel/preset-env',
      {
        'targets': {
          browsers: [
            'last 2 versions',
            'safari >= 7',
            'ie >= 9',
          ],
        },
        'useBuiltIns': 'usage',
        'corejs': '3.6',
        'modules': false,
      },
    ],
    '@babel/preset-react',
    '@babel/preset-flow',
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-optional-chaining',
    '@emotion',
    '@loadable',
  ]
}

[tomtom94]

routes.js file below

import baseLoadable, { LoadableComponent } from '@loadable/component'
import React from 'react'
import Loading from './Exception/Loading'

// https://github.com/gregberge/loadable-components/issues/669#issuecomment-741539840
const loadable = importer => {
  const withoutForwardRef = process.env.BROWSER ? C => props => <C {...props} /> : C => C
  return withoutForwardRef(
    baseLoadable(importer, {
      fallback: <Loading />
    })
  )
}

const Forbidden = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "Forbidden" */ './Exception/403'))
const NoMatch = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "NoMatch" */ './Exception/404'))
const ServerDown = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "ServerDown" */ './Exception/500'))

const DailyResults = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "DailyResults" */ './DailyResults/index'))
const FullSeasons = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "FullSeasons" */ './FullSeasons/index'))
const HeadToHead = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "HeadToHead" */ './HeadToHead/index'))
const Seasons = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "Seasons" */ './Seasons/index'))
const TeamResults = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "TeamResults" */ './TeamResults/index'))
const Connection = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "Connection" */ './Connection/index'))
const LostPassword = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "LostPassword" */ './Connection/LostPassword'))
const SignUp = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "SignUp" */ './Connection/SignUp'))
const User = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "User" */ './User/index'))
const CurrentSeasons = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "CurrentSeasons" */ './CurrentSeasons'))

const AboutUs = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "AboutUs" */ './AboutUs'))
const PrivacyPolicy = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "PrivacyPolicy" */ './PrivacyPolicy'))
const Terms = loadable(() => import(/* webpackPrefetch: true, webpackChunkName: "Terms" */ './Terms'))

// export interface Route {
//   name?: string
//   exact?: boolean
//   path?: string | string[]
//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
//   Component: LoadableComponent<any>
// }

const indexRoutes = [
  {
    path: '/seasons/:type(league-tables|national-cups|international-cups)',
    Component: FullSeasons
  },
  {
    path: '/:type(league-tables|national-cups|international-cups)',
    Component: CurrentSeasons
  },
  {
    path: '/:type(league-table|tournament)/:seasonId',
    Component: Seasons
  },
  {
    exact: true,
    path: ['/', '/daily-results/:date([0-9]{4}-[0-9]{2}-[0-9]{2})?'],
    Component: DailyResults
  },
  {
    path: '/head-to-head/:fixtureId',
    Component: HeadToHead
  },
  {
    path: '/connection',
    Component: Connection
  },
  {
    path: '/lost-password',
    Component: LostPassword
  },
  {
    path: '/sign-up',
    Component: SignUp
  },
  {
    path: '/user/:nickname',
    Component: User
  },
  {
    path: '/team-results/:teamId',
    Component: TeamResults
  },
  {
    path: '/loading',
    Component: Loading
  },
  {
    path: '/about-us',
    Component: AboutUs
  },
  {
    path: '/privacy-policy',
    Component: PrivacyPolicy
  },
  {
    path: '/terms',
    Component: Terms
  },
  { name: 'NoMatch', Component: NoMatch }
]

export default indexRoutes

But when I change file extension from routes.js to route.ts it doesn’t work.

BUT you are right routes.tsx works VERY FINE !!! many thanks

[tomtom94]

@theKashey @IniZio Do we still have to use this workaround ?

const loadable = importer => {
  const withoutForwardRef = process.env.BROWSER ? C => props => <C {...props} /> : C => C
  return withoutForwardRef(
    baseLoadable(importer, {
      fallback: <Loading />
    })
  )
}

I am on react 17 and react-router 5 Because I have been trying without and it’s all good. Can you confirm please ? Cheers.