search

christopherafbjur / sanity-plugin-icon-picker

MIT License
29 stars 22 forks source link

Next.js embedded Studio: Global CSS cannot be imported from within node_modules. #32

Closed christopherafbjur closed 1 year ago

christopherafbjur commented 1 year ago

image

The reason for that error is probably because I needed to implement an ugly fix where i import a global css file for F7 in order to render out the icons properly due to this issue: https://github.com/framework7io/framework7-icons/issues/48

christopherafbjur commented 1 year ago

Ok so apparently this is the expected behavior from Next.js when global CSS files are being imported (even in external packages). There's an RFC regarding it here. To sum up the discussion, it seems that users complain about this and that they have opted out of this behavior in Next.js 13 with App Router.

So for users that use sanity-plugin-icon-picker in a Next.js embedded Sanity Studio that's not using Next.js App Router this is a problem.

I've looked into several workarounds and found these two packages:

How ever, none of these seem to do the trick for me when testing with a Next.js (13.4.3) embedded Sanity Studio.

So how can we work around this?

The problem is this css import which is a workaround for this F7 issue.

Potential solutions:

  1. Dynamic imports / Import the F7 provider only if necessary. Users that experience this tricky problem could opt out from using F7 through provider option as specified here. How ever this will require us to import the problematic css file dynamically (when needed).
  2. Filter out the problematic SVG icons and generate pure F7 SVG Icons instead of using the <\i> tag with the globally loaded css
  3. Create a version of sanity-plugin-icon-picker that does not include Framework 7 icons provider which can be used for users that are using Next.js without App Router (and add to Readme)
  4. Create a fork/PR of F7 icons and fix all the problematic SVGs in the same manner as here https://github.com/framework7io/framework7-icons/commit/3f7bda9f3cbd908b1f9215fc24194f9d7fd6ed77
christopherafbjur commented 1 year ago

I tested this again just now and I realized that everything works just fine when importing the F7 icon components now. I must've made a mistake while testing the 5.0.5 version the first time. I'll implement a fix for this now.