react-donut icon indicating copy to clipboard operation
react-donut copied to clipboard

Does not work with Next.js

Open devcshort opened this issue 5 years ago • 4 comments

What doesn't work

Currently when trying to use this module in a Next.js application, I get an error that says Global CSS cannot be imported from within node_modules

More about the Next.js Error

Global CSS cannot be imported from within node_modules

Temporary workaround

I managed to create a workaround in my own project by changing your package.json "main" to export dist/lib/tui-wrapper.js instead of dist/index.js AND by using a "dynamic" import in my Next.js app.

import dynamic from 'next/dynamic';
const DynamicDonut = dynamic(() => import('react-donut'), { ssr: false });

devcshort avatar Jun 08 '20 16:06 devcshort

It's not working for me neither :(

@import url('https://fonts.googleapis.com/css?family=Lato');
^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:891:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/octa/Escritorio/Zenrise/zenrise-rents-web-client/node_modules/react-donut/dist/index.js:12:1)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.react-donut (/home/octa/Escritorio/Zenrise/zenrise-rents-web-client/.next/server/static/development/pages/index.js:4854:18)
    at __webpack_require__ (/home/octa/Escritorio/Zenrise/zenrise-rents-web-client/.next/server/static/development/pages/index.js:23:31)
    at Module../src/components/Dashboard/PieChartDetailedCard/index.js (/home/octa/Escritorio/Zenrise/zenrise-rents-web-client/.next/server/static/development/pages/index.js:2840:69)

octaviotastico avatar Jul 31 '20 13:07 octaviotastico

@devcshort Thanks for reporting issue. I've taken necessary steps and have updated package.

meetzaveri avatar Sep 27 '20 02:09 meetzaveri

@octaviotastico Hey

I've updated package which should solve your problem. Basically there will be no global css imports now in package's codebase

meetzaveri avatar Sep 27 '20 02:09 meetzaveri

Thank you @meetzaveri

devcshort avatar Sep 28 '20 14:09 devcshort