It does not work in fly.io

[april-swellfox]

I have a Remix app and I'm using this library. It works great locally. But deploying it to fly.io server, it gets this error message:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[altrup]

Hello, very late, but what solved my problem was modifying ./node_modules/react-lazyload/lib/index.js and changing all instances of exports to module.exports. Additionally, change exports.default = LazyLoad to module.exports = LazyLoad and move it above the other exports. Might have unintended consequences, but it fixed the error for me.

[altrup]

Looked into a bit more, not really sure how you'd fix this with Babel. Probably would have to make LazyLoad a named export. I think the main issue is that import works differently on Node, and in the browser. In the browser, it imports correctly, whereas in Node, you would have to access LazyLoad.default.

[altrup]

For anyone else with this problem, this is the workaround I found:

import LazyLoad from "react-lazyload";

// for some reason, when run in the browser, LazyLoad is set to default, whereas in Node, it is set to {default, ...}
// so, we'll just manually check if default exists

let ActualLazyLoad;
if ("default" in LazyLoad) ActualLazyLoad = LazyLoad.default;
else ActualLazyLoad = LazyLoad;

export default (ActualLazyLoad as typeof LazyLoad);

Just put that in another file and import from the new file. Might have to change it slightly if you're not using typescript