yet-another-react-lightbox with Remix app

[neriasudai]

I'm using yet-another-react-lightbox in remixJS with typescript. When I try to use the plugins, I get the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module ~/node_modules/yet-another-react-lightbox/dist/plugins/index.js from ~/api/index.js not supported. igordanchenko/yet-another-react-lightbox Modern React lightbox component Website https://yet-another-react-lightbox.com

<Lightbox
  open={index >= 0}
  index={index}
  close={() => setIndex(-1)}
  slides={slides}
  slideshow={{ ref: slideshowRef }}
  plugins={[Counter]}
/>

[igordanchenko]

Apparently, Remix is unable to import ESM packages by default.

https://remix.run/docs/en/1.16.0/pages/gotchas#importing-esm-packages

To fix this, you need to add yet-another-react-lightbox to the serverDependenciesToBundle option in your remix.config.js file. Please note that I'm using regex that also covers plugins imports.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
  unstable_dev: true,
  serverDependenciesToBundle: [/^yet-another-react-lightbox.*/],
};

Here is a working example - https://codesandbox.io/p/sandbox/yet-another-react-lightbox-122-qsgufv?file=%2Fapp%2Froutes%2Findex.tsx

[neriasudai]

first of all thank you very much .
I added it to serverDependenciesToBundle
And now I tried what you did with the regex but I still get the following error :
now i get this error :

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/yet-another-react-lightbox/dist/index.js from api/index.js not supported.
Instead change the require of /node_modules/yet-another-react-lightbox/dist/index.js in /api/index.js to a dynamic import() which is available in all CommonJS modules.

[igordanchenko]

It's really hard to guess what's causing this error in your specific case. Are you able to provide a minimal reproduction on Codesandbox?

Also, it may be helpful to describe your environment (Node, Remix, React, Typescript versions, etc.)

[neriasudai]

its take me time to make a minimal repo from work product but this is the repo : https://github.com/neriasudai/yat-remix-test.git
this the version "react": "^18.2.0", "react-dom": "^18.2.0", "@remix-run/node": "^1.14.0", "@remix-run/react": "^1.14.0", "node": ">=14"
"typescript": "^4.8.4" and MUI for UI stuff . Thanks I really appreciate it

[igordanchenko]

Thank you for sharing this repro. As it turns out, you incorrectly copied serverDependenciesToBundle setting. You put the regex inside of a string, which made it just a string.

Changing

serverDependenciesToBundle: ["/^yet-another-react-lightbox.*/"],

to

serverDependenciesToBundle: [/^yet-another-react-lightbox.*/],

will resolve your issue.

[neriasudai]

It works .
Thanks for your time bro. You taught me a lot, I really appreciate it