Css error while using with next js.

[ChanderShekharKestone]

Node module css import error come in next js.

[farminf]

Yeah I know about this and I have a plan to do that

[soheilhasanjani]

how to fixed this problem ?

[kaganecee]

did you solve the problem? i have the same problem

[aman-technyx]

Yeah I know about this and I have a plan to do that

when you will do that ETA ??

[Genesis671230]

I have also faced this issue in Nextjs "Global Css cannot be imported within node_modules", Looking forward to get this solved. Also when will tour functionalities be implemented currently working with state to change scenes and make tours. Thanks

[jaydendeveloper]

@farminf It would be nice to see this fixed.

[shahryarbhm]

Here is my solution to this problem, I'm not a front-end developer but I had to fix this in some project. I installed this package which is a fork from the original package but it solved the import css from the node_modules this is the package git repository https://github.com/kayvaninvemo/pannellum-react

npm install @karianpour/pannellum-react --save

and after that it gave the window is not defined error so i fixed this by importing the module using @next/dynamic

import dynamic from "next/dynamic";

const Pannellum = dynamic(
  () =>
    import("@karianpour/pannellum-react").then((module) => module.Pannellum),
  {
    ssr: false,
  }
);
export function ImageDemo() {
  return (
    <div>
      <Pannellum image="/img/milan.jpg" autoLoad={true}></Pannellum>
    </div>
  );
}

export default ImageDemo;

after that I copy and paste the content of https://github.com/kayvaninvemo/pannellum-react/blob/master/src/pannellum/css/pannellum.css to my global css file, and it works fine. I think there would be better solutions to this, but I'm not familiar with front frameworks. I hope this would be helpful

[Arshiash80]

import dynamic from 'next/dynamic';
import Image from 'next/image';
import Test_Pano from '../public/Test_Pano.jpg';

const Pannellum = dynamic(
  () =>
    import('@karianpour/pannellum-react').then((module) => module.Pannellum),
  {
    ssr: false,
  }
);

const PannellumReact = () => (
  <div className="p-10">
    {/* 👇 Image loads okay */}
    <h1 className="text-xl font-semibold">NEXT IMAGE:</h1>
    <Image
      src={Test_Pano}
      width={500}
      alt="Image"
    />
    <hr className="my-5" />
    <h1 className="text-xl font-semibold">Pannellum:</h1>
    <Pannellum image={Test_Pano.src} autoLoad={true}></Pannellum>
  </div>
);

export default PannellumReact;

Your solution doesn't work for me @shahryarbhm.

    "next": "^13.4.12",
    "pannellum-react": "^1.2.4",