next-transpile-modules: Global CSS cannot be imported from within node_modules

I’m re-opening the issue, it is happening on v6 as well.

Support for global CSS was added by @fabianishere in 7.2.0 🙌

Ok, so let’s ignore styled-components, they’re irrelevant.

next-transpile-modules is about applying the existing Webpack rules of Next.js, to some specific path in node_modules, nothing more. In other words, if your usecase is not covered by Next.js, NTM won’t try to fix it.

• import CSS from NPM dependencies like react-datepicker: this I can see is supported there, so this is a lack of support from NTM that I should fix
• import local CSS: last time I checked, I don’t believe it was possible in Next.js, so, to me, the solution is to support CSS modules in node_modules, but not “local CSS”, would that be ok for you? Edit: yeah ok, I see, conflict with the first point, so I guess we should support it

Thank you for testing the branch and confirming it was working for your use-case, I will try to complete it soon.

I don’t think you’re right @nhducit, Next.js still supports 3rd party css import, see: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules

FWIW I’ve given #166 a tryout on our large project and it’s working great with global CSS in our internal modules.

Appreciate the work on that - it’s great to be able to ditch next-css finally.

Ok, So I’ve tested things a little bit:

• importing a global CSS file from node_modules in a component in your Next.js app works
• importing a CSS file from you Next.js app in a component in your Next.js does not work
• Importing the same file from _app works

So this is getting super weird and shady and I am still not sure if this is a bad or good idea to support this scenario.

Do you have a link about that?

@martpie checkout this link.

This is the error when using react-spectrum with next.js v10

error - ./node_modules/@react-spectrum/actiongroup/dist/main.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: node_modules/@react-spectrum/actiongroup/dist/module.js

https://github.com/adobe/react-spectrum/issues/1156

@samuelcastro you still can import 3rd css to your next component but, a library component cannot import it own css

// node_modules/@react-spectrum/actiongroup/dist/module.js
import "./main.css"; <=== this is not allowed

@samuelcastro @martpie from nextjs v10, nextjs stop support third 3rd like react-spectrum import css.

I think we can close this issue or add a note in readme about this issue

check out this issue in react-spectrum https://github.com/adobe/react-spectrum/issues/1156

Workaround: use @zeit/next-css which nextjs used along with next-transpile-module https://github.com/devongovett/rsp-next

So right now I’m in a sabbatical, so open-source support is limited 😝

I will try to have a deeper look tomorrow.

In general, if anyone has the time to work on anything on this project, there are two things you can help me with:

• the most useful thing is to submit a failing test, that way I can experiment to fix the rest and then I know it will work for your usecase
• otherwise, a real fix is always welcome

If you get lost in the codebase, or you are afraid to dive in, know that the first point is the best thing you can do, as it will probably save me 80% time.

Cheers!

I’m using this workaround, use the old and deprecated withCSS plugin, combine with next transpile module

https://github.com/devongovett/rsp-next/blob/master/next.config.js

const withPlugins = require('next-compose-plugins')
const withCSS = require('@zeit/next-css')
const withTM = require('next-transpile-modules')([
  '@adobe/react-spectrum',
  '@spectrum-icons/.*',
  '@react-spectrum/.*'
])

module.exports = withPlugins([withCSS, withTM], {
  // Your next configuration
})

Do you have a link about that? What’s the recommended way then?

This is indeed a gray area and I am not 100% sure if adding/fixing that would not break some Next.js optimizations.

I’d need to talk to Vercel a little bit.