akursat / react-leaflet-cluster

React-leaflet-cluster is a plugin for react-leaflet. A wrapper component of Leaflet.markercluster.
MIT License
104 stars 36 forks source link

NextJS error caused by css imported by a dependency #22

Open Couiljer opened 1 year ago

Couiljer commented 1 year ago

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

airtonix commented 1 year ago

same... needs to be fixed.

jimping commented 1 year ago

Same here

lukew-cogapp commented 1 year ago

+1 :)

lowkingshih commented 1 year ago

vite import also

lukew-cogapp commented 1 year ago

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.

maosin77 commented 1 year ago

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?

JDuchniewicz commented 1 year ago

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.

korizki commented 1 year ago

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