Loadable Components raises error `SSR requires @loadable/babel-plugin, please install it` when using TypeScript `commonjs` modules.

🐛 Bug Report

Dynamic import of some components randomly raise (node:12876) UnhandledPromiseRejectionWarning: Invariant Violation: loadable: SSR requires @loadable/babel-plugin, please install it when access any page of the app in Chrome (server is starting ok) ; while others don’t. The plugin is obviously installed. Some components randomly raise the same error not when calling them but when trying to ‘display source code’ in Chrome. Some components just run fine.

To Reproduce

This component systematically raise this error when any page is called:

import React, { Component } from 'react'
import { IAppDictonary, IAppSetMeta, IAppUser } from '../Shared/App'
import { siteHomepage } from 'bnc-libs/lib/page'
import { Page } from '../../libs/page'

let pageMeta = new Page()
Object.assign(pageMeta, siteHomepage)

export interface IHomeProps extends IAppDictonary, IAppUser, IAppSetMeta { }

export interface IHomeStates { }

export class Home extends Component<IHomeProps, IHomeStates> {

  componentDidMount() {
    this.props.setMeta(pageMeta)
  }

  render() {
    const d = this.props.dictionary
    return (
      <div id="mainDiv" className="homepage">
        <div className="devBanner">
          <h2>{d.devInProgressTitle}</h2>
          <div className="mainDiv center bigMargin">
            <img
              id="tortoise"
              src='/i/ui/tortoise.webp' alt={d.devInProgressTitle} /><br />
            <p>{d.devInProgressText}</p>
          </div>
        </div>
      </div>
    )
  }
}

export default Home

Other similar components don’t raise the error when displayed, but do when trying to display source code of the page in Chrome.

Expected behavior

No error.

System:

• OS: Windows 10 10.0.19041
• CPU: (4) x64 Intel® Core™ i5-2500K CPU @ 3.30GHz
• Memory: 4.61 GB / 9.98 GB

Binaries:

• Node: 14.16.0 - D:\DEV\nodejs\node.EXE
• npm: 6.14.11 - D:\DEV\nodejs\npm.CMD

Config

"dependencies": {
    "@loadable/component": "^5.14.1",
    "@loadable/server": "^5.14.2",
    "bnc-libs": "^0.2.33",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "isomorphic-fetch": "^3.0.0",
    "lazysizes": "^5.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/core": "^7.13.13",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@loadable/babel-plugin": "^5.13.2",
    "@loadable/webpack-plugin": "^5.14.2",
    "@types/express": "^4.17.11",
    "@types/isomorphic-fetch": "0.0.35",
    "@types/loadable__component": "^5.13.3",
    "@types/loadable__server": "^5.12.3",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-router-dom": "^5.1.7",
    "babel-loader": "^8.2.2",
    "jshint": "^2.12.0",
    "ts-node": "^9.1.1",
    "ts-node-dev": "^1.1.6",
    "typescript": "^4.2.3",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-node-externals": "^2.5.2"
  }
}

[jjblumenfeld]

We are experiencing the same issue. We are using commonJS modules and are doing SSR using our own expressJS server on node v12.

[denchiklut]

@theKashey is there any chance to fix ‘@loadable/babel-plugin’ to work with commonjs?