TypescriptError: Can't resolve "Module not found:

[kucingz]

Hey i have question when i try to import plugins or css compiler returnsCan't resolve "Module not found ...
Only import Lightbox from "yet-another-react-lightbox"; works other imports give Can't resolve "Module not found error
typescript version: 4.1.6
react: 16.14.0

[igordanchenko]

It sounds like an issue we've previously seen with old Webpack / CRA versions here. I can suggest 3 different options to address this issue.

1. Prepend "dist" to the import path:

import "yet-another-react-lightbox/dist/styles.css";
import Zoom from "yet-another-react-lightbox/dist/plugins/zoom";

2. Add Webpack aliases (see example here)

3. Modernize your tech stack by upgrading to relatively modern versions of React / Webpack / CRA / etc.

[kucingz]

1 and 2 do not work, 3rd option is not possible in my project.
When i tried importing like u said i got this as output

[igordanchenko]

Well, apparently, the solution described here no longer works with YARL v2.

Here is the current workaround to make YARL v2 work with CRA 4 and TypeScript.

import * as React from "react";

import Lightbox, { Plugin } from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/dist/plugins/thumbnails";
import "yet-another-react-lightbox/dist/styles.css";
import "yet-another-react-lightbox/dist/plugins/thumbnails/thumbnails.css";

import slides from "./slides";

function App() {
    const [open, setOpen] = React.useState(false);

    return (
        <div>
            <button type="button" onClick={() => setOpen(true)}>
                Open Lightbox
            </button>

            <Lightbox 
                open={open} 
                close={() => setOpen(false)} 
                slides={slides} 
                plugins={[Thumbnails as Plugin]} 
            />
        </div>
    );
}

export default App;

[igordanchenko]

And here is a workaround using craco v6 and CRA 4.

Use all standard imports as per YARL documentation.

import * as React from "react";

import Lightbox from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";

import slides from "./slides";

function App() {
    const [open, setOpen] = React.useState(false);

    return (
        <div>
            <button type="button" onClick={() => setOpen(true)}>
                Open Lightbox
            </button>

            <Lightbox open={open} close={() => setOpen(false)} slides={slides} plugins={[Thumbnails]}/>
        </div>
    );
}

export default App;

Define webpack aliases via craco:

// craco.config.js

const path = require("path");

module.exports = {
    webpack: {
        alias: {
            "yet-another-react-lightbox/styles.css": path.resolve(
                __dirname,
                "node_modules/yet-another-react-lightbox/dist/styles.css"
            ),
            "yet-another-react-lightbox/plugins/thumbnails": path.resolve(
                __dirname,
                "node_modules/yet-another-react-lightbox/dist/plugins/thumbnails"
            ),
            "yet-another-react-lightbox/plugins/thumbnails.css": path.resolve(
                __dirname,
                "node_modules/yet-another-react-lightbox/dist/plugins/thumbnails/thumbnails.css"
            ),
        },
    },
};