react-leaflet-cluster icon indicating copy to clipboard operation
react-leaflet-cluster copied to clipboard

NextJS error caused by css imported by a dependency

Open Couiljer opened this issue 2 years ago • 8 comments

Hi there,

Is there a way to use this package within a NextJS app ? I cannot use it without receiving this error :

Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/react-leaflet-cluster/lib/index.js

thx

Couiljer avatar Jan 04 '23 16:01 Couiljer

same... needs to be fixed.

airtonix avatar Jan 07 '23 09:01 airtonix

Same here

jimping avatar Jan 25 '23 13:01 jimping

+1 :)

lukew-cogapp avatar Jan 29 '23 09:01 lukew-cogapp

vite import also

lowkingshih avatar Feb 03 '23 09:02 lowkingshih

Hi everyone,

If you update to Next 13.1, it now supports transpiling packages.

Here's a link to their docs.

Here's how I have used this in my next.config.js file:

module.exports = {
  reactStrictMode: true,
  transpilePackages: ["react-leaflet-cluster"],
};

Whilst I hope this gets fixed in the react-leaflet-cluster package, it's good Next has identified this as a useful workaround for older packages or those that haven't been updated yet.

lukew-cogapp avatar Feb 03 '23 12:02 lukew-cogapp

Yeah.. This is next issue. https://github.com/vercel/next.js/issues/19936 They fixed it in next 13, but i would rather wait to upgrading next in my app for obvious reasons. Do you guys plan to do something about it?

maosin77 avatar Feb 28 '23 08:02 maosin77

I had to work around this problem as Next.js did not transpile this package so I copied over the library locally, removed .css files from the index.js and then imported them in my _app.js. Finally I changed the import to import from my local lib directory.

JDuchniewicz avatar Jul 22 '23 08:07 JDuchniewicz

I have same problem

Hi everyone,

If you update to Next 13.1, it now supports transpiling packages.

Here's a link to their docs.

Here's how I have used this in my next.config.js file:

module.exports = {
  reactStrictMode: true,
  transpilePackages: ["react-leaflet-cluster"],
};

Whilst I hope this gets fixed in the react-leaflet-cluster package, it's good Next has identified this as a useful workaround for older packages or those that haven't been updated yet.

I try this suggest,

  1. Updating next.config.js with code above,
  2. Update my next js application with next v.13.4 or you can update with "npm install next@latest"

And my problem was solved

korizki avatar Sep 19 '23 03:09 korizki