Error when doing SSR and webpack serve (webpack 5)

[oreqizer]

🐛 Bug Report

When webpack (5.3.2, works OK on 4.x.x) is run in serve mode with webpack-dev-server, I get the following error:

loadable.esm.js:277 loadable-components: failed to synchronously load component, which expected to be available 
{fileName: "./src/app/pages/Index/index.tsx", chunkName: "pages-Index", error: "Cannot read property 'call' of undefined"}
chunkName: "pages-Index"
error: "Cannot read property 'call' of undefined"
fileName: "./src/app/pages/Index/index.tsx"
__proto__: Object

When I just build using webpack --mode production and run production server, all is OK.

This is my webpack config (the rest is in @reactizer/webpack but nothing really important, I tried adjusting all values without difference, the only difference is serve):

const path = require("path");
const reactizer = require("@reactizer/webpack");
const webpack = require("webpack");
const dotenv = require("dotenv-safe");
const { merge } = require("webpack-merge");
const LoadablePlugin = require("@loadable/webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SentryPlugin = require("@sentry/webpack-plugin");

const env = dotenv.config({
  allowEmptyValues: true,
  path: ".env",
  example: ".env.example",
}).required;

module.exports = (e, argv) => {
  const production = argv.mode === "production";

  const cfg = reactizer(e, argv);

  // Remove styled-components specific things
  // eslint-disable-next-line fp/no-mutation
  cfg.module.rules = cfg.module.rules
    .filter((r) => String(r.test) !== String(/\.tsx?$/))
    .filter((r) => String(r.test) !== String(/\.css$/));

  const base = {
    resolve: {
      fallback: { path: false },
    },
    entry: {
      app: path.resolve(__dirname, "src/app/index.ts"),
    },
    plugins: [
      new webpack.EnvironmentPlugin(env),
      // https://github.com/vfile/vfile/issues/38
      new webpack.ProvidePlugin({
        process: "process/browser",
      }),
      new LoadablePlugin({
        writeToDisk: { filename: "dist" },
      }),
      new MiniCssExtractPlugin({
        filename: production ? "[name].[contenthash:8].css" : "[name].css",
        chunkFilename: production ? "[name].[contenthash:8].css" : "[name].css",
        ignoreOrder: true,
      }),
      env.SENTRY_RELEASE &&
        new SentryPlugin({
          release: env.SENTRY_RELEASE,
          include: "src",
          ext: ["ts", "tsx"],
        }),
    ].filter(Boolean),
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            "babel-loader",
            {
              loader: "linaria/loader",
              options: {
                sourceMap: !production,
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: !production,
              },
            },
            {
              loader: "css-loader",
              options: {
                sourceMap: !production,
                url: false,
              },
            },
            "postcss-loader",
          ],
        },
      ],
    },
  };

  if (production) {
    return merge(cfg, base, {
      output: {
        path: path.resolve(__dirname, "dist/static"),
      },
    });
  }

  return merge(cfg, base, {
    output: {
      path: path.resolve(__dirname, ".tmp/static"),
    },
    devServer: {
      contentBase: false,
      compress: true,
    },
  });
};

To Reproduce

Steps to reproduce the behavior:

Do a dev server using webpack serve, try having a component using loadable(() => import("...")); and render using loadableReady(() => ...);

Expected behavior

The error should not happen and app should run.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 10.15.4
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 806.82 MB / 16.00 GB
 - Shell: 5.8 - /usr/local/bin/zsh
## Binaries:
 - Node: 14.4.0 - /usr/local/bin/node
 - Yarn: 1.22.10 - ~/gainwagon/web/node_modules/.bin/yarn
 - npm: 6.14.4 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/babel-plugin: ^5.13.2 => 5.13.2 
 - @loadable/component: ^5.14.1 => 5.14.1 
 - @loadable/server: ^5.14.0 => 5.14.0 
 - @loadable/webpack-plugin: ^5.14.0 => 5.14.0 

[open-collective-bot]

Hey @oreqizer 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use Loadable at work, you can also ask your company to sponsor us ❤️.

[theKashey]

Webpack 5 is not yet properly supported #636

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dmitryshelomanov]

any solutions ? @oreqizer

[oreqizer]

it was fixed in the meantime @dmitryshelomanov