[Turbopack] Parsing css source code failed

[rwieruch]

Bug report in v4

vercel/turborepo#2356 (comment)

Trying to use Turbopack in Next.js with the latest Leaflet/Leaflet-React version yields the error from the linked Issue. A Turbopack maintainer mentioned that Leaflet does not use valid syntax here.

[jpainam]

Is t here any update for this issue? @rwieruch How did you solve it?
Thanks

[rwieruch]

Did not solve it. Cannot use Turbopack until this is fixed :)

But I think there is enough pressure on Library Maintainers with all these recent changes in the React/Next community, so I'd hope that someone else may see this as a good first issue to contribute to open source :)

[rwieruch]

Related vercel/turborepo#2356 (comment)

[rinvii]

I'm getting a similar error

[shenst1]

@rwieruch I was able to do a workaround using the cdn:

Map.tsx
import "./Map.css";

Map.css
@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');

[mattmchugh4]

I was unable to reproduce this issue mentioned. My setup includes the following versions:

• Next.js: 14.2.5
• Leaflet: 1.9.4
• React-Leaflet: 4.2.1
• React: 18
• Turbopack: used with next dev --turbo

Everything seems to be working fine, and the Leaflet CSS is being bundled without any errors.

If there was an issue, it appears it might have been related to the default Leaflet CSS. According to the vercel/turborepo#2356 (comment), the problem might have been caused by old CSS in Leaflet that's since been removed or updated.

Given that I don't see the issue occurring, I think this should be closed. However, if anyone encounters the problem again, please list your dependencies / provide an example.

[lethal-bot]

@shenst1 solution works with turbo pack of nextjs.
just paste this to global.css of your project @import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'); and yes import 'leaflet/dist/leaflet.css' is still causing issues with next dev --turbo