React NextJS: external CSS error

[norama]

Great lib, but I am struggling to get it function in a React - NextJS project. It seems that the provided Zoomist distribution is not self-contained, I already tried to add SASS dependency but it only works for storybook. The real app says this:

./node_modules/zoomist/src/scss/index.scss
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/zoomist/src/index.js

But why it refers to src at all?

There is a solution however:

Instead of

import Zoomist from "zoomist"

write

import Zoomist from "zoomist/dist/zoomist.min.js";
import "zoomist/dist/zoomist.min.css";

But this is not very nice in a React app...

[cotton123236]

Hi @norama , Thank you for your suggestion! I rebuild Zoomist with TypeScript and already published on NPM just few days ago. You can checkout branch next. I'll set it to default version after I build the documentation. After that, I plan to build zoomist/react and zoomist/vue to enrich the developer community. If you have any question or suggestion for Zoomist version 2, please let me know! Thanks!!

[norama]

@cotton123236 Hi, thanks but it is not working for me:

Module not found: Default condition should be last one

   import "zoomist/css";
> import Zoomist from "zoomist";

[cotton123236]

Hey @norama , I fixed this problem at the latest version 2.0.10! By the way, I switch v2 to default version, so you can install Zoomist from NPM by using npm i zoomist instead of npm i zoomist@next

[norama]

Hi @cotton123236 , thanks a lot for your quick reaction, now it is working OK!!