Custom thumbnail for CRA 4

[EMCarlos]

Hello, I'm having trouble using the render prop to define a custom thumbnail when trying to use custom slides from youtube,

I try to use this example, and having an error when I define a custom thumbnail:

Type '{ slide: ({ slide, rect }: RenderSlideProps<Slide>) => Element | undefined; thumbnail: 
  ({ slide, ...rest }: any) => Element | undefined; }' is not assignable to type 'Render'.
  Object literal may only specify known properties, and 'thumbnail' does not exist in type 'Render'.

If I don't use the thumbnail plugin, it works well, but if not, I have an error like cannot read properties of undefined reading type

Is there any solution to it?

Also I'm using this to handle the imports

My versions are:

React: 16.14.0,
typescript: 4.4.4,
yet-another-react-lightbox: 3.11.3,
react-scripts: 4.0.3,

[igordanchenko]

It's really hard to guess what exactly is wrong in your case since you are not showing your code. You mention one compile time error and another one seems to be a runtime error.

craco v6 workaround should work fine in your case. Please consider posting a complete example on CodeSandbox if you are still experiencing this issue.

[EMCarlos]

My bad!

This would be the example: link
It solves using this type of import import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails"; instead of import Thumbnails from "yet-another-react-lightbox/dist/plugins/thumbnails";

But when I try that in my repo:

Failed to compile.

./src/App.tsx
Module not found: Can't resolve 'yet-another-react-lightbox/plugins/thumbnails' in '...\src\App'
Error from chokidar (E:\node_modules): Error: EBUSY: resource busy or locked, lstat 'E:\DumpStack.log.tmp'
Error from chokidar (E:\node_modules): Error: EBUSY: resource busy or locked, lstat 'E:\hiberfil.sys'

And the runtime error happens when I try to delete this:

  thumbnail: ({ slide, ...rest }) => //here is the problem
            isYouTubeSlide(slide) ? (
              <ImageSlide slide={{ src: slide.thumbnail }} {...rest} />
            ) : undefined,

After that, the compile error is gone, but the runtime one appears. Can solve it only after deleting Thumbnails as Plugin.

Is there another way that doesn't involve craco? Sorry, but I'm trying not to add another library to solve this

[igordanchenko]

Is there another way that doesn't involve craco? Sorry, but I'm trying not to add another library to solve this

1. Migrating off CRA (react-scripts) is the best long-term investment since CRA is barely maintained by Meta. Vite is an amazing alternative.

2. Upgrading to CRA 5 (because CRA 4 is severely outdated) would solve all of your TS errors as you'd no longer need to hack the subpath module imports.

3. Craco is the best workaround if you must stay on CRA 4. It's a trivial price to pay if you must continue using outdated toolchain.

4. The following import seems to trick TypeScript into importing the correct plugin path and applying the intended module augmentation.

import type ThumbnailsPlugin from "yet-another-react-lightbox/plugins/thumbnails";

// ...

plugins={[Thumbnails as typeof ThumbnailsPlugin]}

https://codesandbox.io/s/yet-another-react-lightbox-160-myg96l

This hack seems to work, but I want to be absolutely clear - it's a hack, not a recommended or supported approach.

5. If some other similar issues will crop out in the future and none of the above options will work, // @ts-ignore is going to be your best last-resort option.

[EMCarlos]

Spectacular! It worked🙌

Yeah, I would love to migrate to Vite or CRA 5, but it's not only up to me to make that change, however, I will keep the recommendations in mind

Thank you very much!