Import error for my NextJS project..

[dalver99]

I tried to use the library after installing it, testing it two methods..

import { useEffect, useRef } from "react";
import LichessPgnViewer from "lichess-pgn-viewer";

export default function ChessPage() {
  const viewerRef = useRef(null);

  useEffect(() => {
    if (viewerRef.current) {
      LichessPgnViewer(viewerRef.current, {
        pgn: "e4 c5 Nf3 d6 e5 Nc6 exd6 Qxd6 Nc3 Nf6",
      });
    }
  }, []);

  return <div ref={viewerRef}></div>;
}

import LichessPgnViewer from "lichess-pgn-viewer";

const lpv = LichessPgnViewer(domElement, {
  pgn: "e4 c5 Nf3 d6 e5 Nc6 exd6 Qxd6 Nc3 Nf6",
});

lpv.goTo("first");
lpv.goTo("next");
lpv.flip();
console.log(lpv.game);

export default function ChessPage() {
  return <div>hello </div>;
}

Which constantly gives the same error:

Still gives Error: Cannot find module 'C:\project\node_modules\lichess-pgn-viewer\dist\pgnViewer' imported from C:\project\node_modules\lichess-pgn-viewer\dist\main.js

I tried to import this in many other ways, but seems like the project export settings is the problem (I'm not sure tho).

Please let me know if I am wrong with my import method, which probably is the case..

[dalver99]

app router works, page doesn't..