Global CSS cannot be imported from within node_modules (next js)

[junjou]

Hello,

Seems like it can't work with nextjs:

[akursat]

@junjou The maintainers of nextjs planning to allow CSS imports from node_modules. I hope the error will be gone. I'll follow the PR and test it when it is merged.
vercel/next.js#19936
vercel/next.js#27953

[koeit]

Is this still not fixed @akursat or any workaround?

[akursat]

@koeit Please follow the discussion vercel/next.js#27953 possible workaround

[bsor-dev]

+1
@akursat your plugin is outdated maybe you could help other future users by updating it

[SublimeProphets]

upvote! :-)

[vehere-ccuMaksym]

Does anyone found some solution? Can you share the code if "yes"?

[r1skz3ro]

@StrangersSoftware use this library - https://github.com/bem/next-global-css

adjust your next.config.js like in the snippet below, restart the project and it should work :)

  const { patchWebpackConfig } = require('next-global-css');
  const webpackNodeExternals = require('webpack-node-externals');
  
  const nextConfig = {
    {...}
    webpack: (config, options) => {
      patchWebpackConfig(config, options);
      if (options.isServer) {
        config.externals = webpackNodeExternals({
          allowlist: [/design-system/],
        });
      }
      return config;
    },
    {...}
  };

[akursat]

@junjou @r1skz3ro @StrangersSoftware @SublimeProphets @bsor-dev @koeit The addressed problem should be gone with the new version. Please give it a try and let me know if you still encounter a problem.

[StrangerTwo]

@akursat Currently using the version 2.1.0 and still facing this issue.

error - ../node_modules/react-leaflet-cluster/lib/assets/MarkerCluster.Default.css
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

Let me know if I can help you provide any other information.

[StrangerTwo]

I believe the file https://github.com/akursat/react-leaflet-cluster/blob/main/src/index.tsx should not import

import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css

nor

import './assets/MarkerCluster.css'
import './assets/MarkerCluster.Default.css'

And instead the documentation of 'react-leaflet-cluster' should be changed, so that people import these css files themselves.

Let me know your thoughts! Thanks

[vehere-ccuMaksym]

@junjou @r1skz3ro @StrangersSoftware @SublimeProphets @bsor-dev @koeit The addressed problem should be gone with the new version. Please give it a try and let me know if you still encounter a problem.

The new version still gives me the same error on Next.js.

I solved this by using your index.tsx file as one of my components and added all styles in my projects global css-file.
All the necessary dependencies respectively too.

Thanks for your plugin!

[jackbuscombe]

Add this to the next.config.js file:
transpilePackages: ["react-leaflet-cluster"],

[jakobskrym]

Add this to the next.config.js file: transpilePackages: ["react-leaflet-cluster"],

This worked for me 👍

[luiskurihara]

Add this to the next.config.js file: transpilePackages: ["react-leaflet-cluster"],

When i try this, are showing this:

[yewyewXD]

When i try this, are showing this:

@luiskurihara
Add this to the next.config.js file:
experimental: { esmExternals: 'loose' },

and make sure you use dynamic import for the component with leaflet inside

import dynamic from 'next/dynamic'
const MapApp = dynamic(() => import('@/components/ReactLeafletMap'), { ssr: false })