[Turbopack] Parsing css source code failed

PaulLeCam / react-leaflet

React components for Leaflet maps

https://react-leaflet.js.org

Other

5.19k stars 887 forks source link

[Turbopack] Parsing css source code failed #1122

Closed rwieruch closed 2 months ago

rwieruch commented 10 months ago

Bug report in v4

https://github.com/vercel/turbo/issues/2356#issuecomment-1853302120

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 commented 9 months ago

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

rwieruch commented 9 months ago

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 commented 9 months ago

rinvii commented 8 months ago

I'm getting a similar error

Screen Shot 2024-03-12 at 8 28 35 AM

shenst1 commented 8 months ago

@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 commented 3 months ago

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 commented 2 months ago

@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

wfl-junior commented 1 month ago

I am having the same issue with the library cmdk

Next.js: 15.0.0
cmdk: 1.0.0
React: 19.0.0-rc-65a56d0e-20241020
Turbopack: used with next dev --turbo

frontBOI commented 1 day ago

same error for me using SCSS:

Next.js: 15.0.3
React: 18.2.0