Typescript + 5.2 + SSR Bug

🐛 Bug Report

5.2.1 CRA.2.1+SSR+Typescript throws the following error { Invariant Violation: loadable: SSR requires @loadable/babel, please install it at invariant (/Users/example-project/node_modules/@loadable/component/dist/loadable.cjs.js:13:15) at new InnerLoadable (/Users/example-project/node_modules/@loadable/component/dist/loadable.cjs.js:131:9) at processChild (/Users/example-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2748:14) at resolve (/Users/example-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2714:5) at ReactDOMServerRenderer.render (/Users/example-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3098:22) at ReactDOMServerRenderer.read (/Users/example-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3057:29) at renderToStaticMarkup (/Users/example-project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3539:27) at process (/Users/example-project/node_modules/react-apollo/react-apollo.umd.js:129:24) framesToPop: 1, name: 'Invariant Violation' }

To Reproduce

Steps to reproduce the behavior:

https://github.com/followbl/loadable-components/tree/bug-ssr-loadable in the examples SSR repo of loadable-components yarn && yarn run build:web && yarn run build:server

Expected behavior

At a minimum it should say the correct plugin to install @loadable/babel-plugin…however, even with the plugin installed, I’m still running in to the above error. If you comment out the loadable components in loadable-components/examples/server-side-rendering/src/client/routes.tsx and load the vanilla ones, it works fine. This very well could be an issue you in ts-loader or my tsconfig…but I have spent over a day on this bug and cannot think of what else might be causing this

Link to repl or repo (highly encouraged)

https://github.com/followbl/loadable-components/tree/bug-ssr-loadable

Run `npx envinfo --system --binaries --npmPackages

yarn && yarn run build:web && yarn run build:server

[followbl]

@neoziro as soon as I have a working solution I will gladly update a fully working TypeScript example. Thanks for loadable-components and your attentiveness to users of this OSS 👍

[usamakamran1]

Using ts-loader and babel-loader together in webpack worked for me. Had to change the current build process for my project but certainly worth it.