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

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

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

you have to use import in order to have code splitting with webpack. So the input is always expected to be non commonjs.

Actually the code itself shall be es6 to use import while node module could be anything like commonjs, meanwhile compilation target could be yet something else.

In typescript configuration parameters are clearly different:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  }
}

the problem is in tsconfig.json when you use module: commonjs!

if you will try to change it to es2020 for example the error will be gone

Bingo. Absolutely correct @denchiklut: babel plugin looks for the variable with name “loadable” ( https://github.com/gregberge/loadable-components/blob/main/packages/babel-plugin/src/index.js#L39) and CJS transformation “renames” it.

@vancityhuddy Unfortunately, no. My code just works nicely without loadable-components, and crashes with it. The error message is meaningless as the plugin is installed. Except getting deeply into loadable-components source code, which is beyond my skills, I don’t know what to do.

I am also experiencing this issue. Loading endpoints that use Loadable are throwing this strange “SSR requires @loadable/babel-plugin”

Any progress made here @ludovic-lambert ?

I have almost the exact same dependencies, but am also using Razzle

Any piece of code containing const X= loadable(() => import('../X'), { ssr: true, fallback: <Spinloader /> }), with X called during the initial request raise this error, on server-side only. Everything is installed correctly according to the documentation, and particularly @lodable/babel-plugin. Which makes the error message meaningless. The reason why requireSync is missing is beyong my app as I don’t know where does this var comes from, for sure not from my code. Meanwhile the code works like a charm in SSR without Loadable-components.

Here are all my dependencies :

"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"
  }

Here is my babel config file :

{
    "presets": [
      "@babel/preset-typescript",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@loadable/babel-plugin"
    ]
}

Here is my webpack config :

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const LoadablePlugin = require('@loadable/webpack-plugin');

const devTools = process.env.NODE_ENV == 'production' ? false : 'source-map';

const serverApp = {
  mode: process.env.NODE_ENV,
  entry: './src/server/index.ts',
  devtool: devTools,
  target: 'node',
  module: {
    rules: [{
      test: /\.tsx?/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  externals: [nodeExternals()],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bnc-app-server.js'
  }
};

const clientApp = {
  mode: process.env.NODE_ENV,
  devtool: devTools,
  entry: './src/client/index.tsx',
  output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bnc-app-client.js'
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  plugins: [
    new LoadablePlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.ALERT': JSON.stringify(process.env.ALERT),
      'process.env.DOMAIN_NAME': JSON.stringify(process.env.DOMAIN_NAME),
      'process.env.API_URI': JSON.stringify(process.env.API_URI),
      'process.env.SITE_LINK': JSON.stringify(process.env.SITE_LINK),
      'process.env.SITE_NAME': JSON.stringify(process.env.SITE_NAME)
    })
  ]
};

module.exports = [clientApp, serverApp];

Here is my typescript config :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "jsx": "react",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": false,
    "declaration": false,
    "isolatedModules": true,
    "removeComments": true,
    "resolveJsonModule": true
  }
}

Is there any other trace I can log?