Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Css error while using with next js. #103

Open
ChanderShekharKestone opened this issue May 12, 2022 · 8 comments
Open

Css error while using with next js. #103

ChanderShekharKestone opened this issue May 12, 2022 · 8 comments

Comments

@ChanderShekharKestone
Copy link

Node module css import error come in next js.

image
image

@farminf
Copy link
Owner

farminf commented May 13, 2022

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

@soheilhasanjani
Copy link

how to fixed this problem ?

@kaganecee
Copy link

did you solve the problem? i have the same problem

@aman-technyx
Copy link

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

when you will do that ETA ??

@Genesis671230
Copy link

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
Copy link

jaydendeveloper commented Dec 9, 2022

@farminf It would be nice to see this fixed.

@ZeroXShazam
Copy link

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
Copy link

Arshiash80 commented Oct 27, 2023

Screenshot 2023-10-27 at 02 59 36
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",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants