Webpack 5 incorrectly requiring @loadable/component. (Works with Webpack 4)

💬 Questions and Help

Hello everyone! I am running into a really weird webpack 5 bug with @loadable/component. The resolved module is not being imported correctly when looking at server.js output from webpack.

Webpack 4: When bundling my code and requiring the @loadable/component package it looks like this:

/* harmony import */ var _loadable_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @loadable/component */ "@loadable/component");
/* harmony import */ var _loadable_component__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_loadable_component__WEBPACK_IMPORTED_MODULE_1__);

Webpack 5:

/* harmony import */ var _loadable_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @loadable/component */ "@loadable/component");

Why is Webpack 5 missing the second line that Webpack 4 produces? This is the only module that is having issues. Because of what Webpack 5 produces I get TypeError: _loadable_component__WEBPACK_IMPORTED_MODULE_1__ is not a function. I’ve been trying to figure out what is going wrong here for a couple days and I am stumped. Anyone have any ideas?

This is the only place I am seeing this weird behavior and I have no idea why it is happening now. I appreciate the help!

Note: All my @loadable packages are up to date.

"@loadable/babel-plugin": "^5.13.2",
"@loadable/webpack-plugin": "^5.15.1",
"@loadable/component": "^5.15.0",
"@loadable/server": "^5.15.0",

Edit: The component in question that is causing the “is not a function” error.

import React from "react";
import loadable, { DefaultComponent } from "@loadable/component";
import { LoadingPage } from "../LoadingPage";

export const loadablePage = <T extends {}>(loader: (props: T) => Promise<DefaultComponent<T>>) =>
  loadable(loader, {
    fallback: <LoadingPage />,
  });

[e1himself]

@AAAstorga

There’s a working option I’ve found to unwrap an improper default export (with a different package) that you may want to try:

import loadableModule "@loadable/component";

function unwrap<T>(module: T | { __esModule: boolean; default: T }): T {
    if (typeof module === 'object' && '__esModule' in module && 'default' in module) {
        return module.default;
    }
    return module;
}

const lodable = unwrap(loadableModule);

[dagda1]

the unwrap function by @e1himself fixes it.