loadable-components

loadable-components copied to clipboard

💬 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 />,
  });

Hey @AAAstorga :wave:, 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 :heart:.

I have the same problem.

@e1himself Have you found a workaround / fix? I saw your comments here (https://github.com/webpack/webpack/issues/14601#issuecomment-979655254) and was hoping you figured out a solution

I did not find a good local solution yet.

A good solution would be to submit a PR to change the exports of @loadable/component to provide a named alternative for the default loadable export.

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.

@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);

This is not about webpack - this is about TypeScript. You need to enable esModuleInterop

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.

@theKashey I have this problem now with webpack 5 when exporting to esm modules and I have "esModuleInterop": true definitely set

the unwrap function by @e1himself fixes it.

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.