Next.js and Pannellum-react: "Global CSS cannot be imported from within node_modules." error

QuirkWebDevelopment commented 2 years ago

Hi!

I'm receiving the following error after installing and attempting to import the component in a Next.js 11 environment.

import { Pannellum } from "pannellum-react";

error - ./node_modules/pannellum-react/es/pannellum/css/pannellum.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/pannellum-react/es/elements/Pannellum.js

Next.js official documentation on this issue (https://nextjs.org/docs/messages/css-npm) doesn't have a good solution to this other than to refactor things so there's no CSS imported from node_modules or to "make a compiled version of the dependency."

That being said, I'm wondering if anyone has any insight on a workaround?

I found someone else with the same issue too: https://stackoverflow.com/questions/66664698/i-got-this-error-in-next-js-while-implement-pannellum-react-to-make-3d-images-g

Tracking URL here in case that thread ends up with valuable information.

Any insight much appreciated, and thanks for making the React version in the first place!

. . .

Some more info:


{ // package.json
  "name": "whatabyte",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "node-version": "14",
  "dependencies": {
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "next": "^11.1.2",
    "node-sass": "^5.0.0",
    "pannellum-react": "^1.2.4",
    "prismjs": "^1.23.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.6.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
     "build-export": "rm -rf .next && next build && next export",
    "start": "next start"

  }
}

And screenshot of errors in terminal: