Global CSS cannot be imported from within node_modules #146

samuelcastro · 2020-12-09T17:43:08Z

I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE FAQ

Are you trying to transpile a local package or an npm package?
local package

Describe the bug
My transpiled UI library imports a css file from react-datepicker, and this is throwing an error which is described below. Next.js 10.x now supports the ability to import css from 3rd party modules without the need to include it in the _app.tsx (https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules).

Initially I thought this was a bug on Next.js then I opened up this bug: vercel/next.js#19936, although @timneutkens suggested me that this might be a bug on this library instead.

This is the error I'm getting:

./node_modules/react-datepicker/dist/react-datepicker.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@edooking/ui/src/elements/DatePicker/DatePicker.tsx

To Reproduce
Import a css in a transpiled library.

Expected behavior
Be able to import the css and successfully run the application.

Setup

Next.js version: 10.0.3
next-transpile-modules version: 6.0.0
Node.js version: 14.4.0
npm/yarn version: 1.22.4
Operating System: macOS
Webpack 4

Any thoughts?

The text was updated successfully, but these errors were encountered:

samuelcastro · 2020-12-09T18:04:00Z

I upgraded the library and now I'm getting another issue, I'll investigate more first, closing for now.

samuelcastro · 2020-12-09T18:59:01Z

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

martpie · 2020-12-28T17:48:29Z

Where are you trying to import this CSS? From a component or _app?

samuelcastro · 2021-01-13T23:16:13Z

Hi @martpie I'm importing them from a component, it works fine importing them from _app.

martpie · 2021-01-13T23:32:16Z

next-transpile-modules mimicates the behavior of Next.js, so importing global css from components is not supported. Use _app instead.

samuelcastro · 2021-01-13T23:34:54Z

What do you mean @martpie? Next.js supports css import from components since 9.5.4, see: https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules

martpie · 2021-01-13T23:36:12Z

Ah good to know, so it's on my side 👍

nhducit · 2021-01-18T13:52:04Z

@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
adobe/react-spectrum#1156

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

samuelcastro · 2021-01-18T18:27:59Z

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

nhducit · 2021-01-21T02:20:21Z

@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

martpie · 2021-01-21T02:26:27Z

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.

nhducit · 2021-01-21T02:29:19Z

@martpie nextjs team drop support this import style and require ui libraries change the way their import component css

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

// component in next.js
import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
} from "@reach/accordion";
import "@reach/accordion/styles.css"; <<=== recommended

martpie · 2021-01-21T02:30:29Z

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

nhducit · 2021-01-21T02:40:59Z

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
})

nhducit · 2021-01-21T02:46:16Z

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

adobe/react-spectrum#1156

Naterra · 2021-01-26T14:54:41Z

Same issue with CKEditor 5
What can we do to solve it?

martpie · 2021-01-26T17:09:22Z

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!

martpie · 2021-02-01T01:55:43Z

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.

nhducit · 2021-02-01T03:59:07Z

there are two more cases:

UI library import the CSS by themself does not work
Global CSS cannot be imported from within node_modules #146 (comment)
Global CSS cannot be imported from within node_modules #146 (comment)
component in a yarn workspace import CSS works but if we import this component from Next.js app does not work

samuelcastro · 2021-02-01T23:28:25Z

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.

The first scenario never worked for me. (importing a global CSS file from node_modules in a component in your Next.js app works)

KB1RMA · 2021-02-15T14:01:20Z

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.

martpie · 2021-02-15T14:24:23Z

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

karol-f · 2021-05-17T19:54:18Z

@martpie Can I help You somehow with e.g. testing this feature?

martpie · 2021-05-17T20:22:16Z

@karol-f if you can:

describe your usecase (if it's similar to the first message of this issue or different)
test Global CSS improvements #166 and tell me if it solves your usecase

those two things would help a lot

edit: it seems that my rebase with master broke it, so let me fix the checks first

karol-f · 2021-05-17T20:38:18Z

@martpie

Use-case:

I'm using NPM Workspaces (monorepo)
Used to tweak next.config.js file to use other monorepo packages (using webpackConfig.module.rules[0].include = [...]) but switched to next-transpile-modules
With the newest Next.js releases @zeit/next-css and @zeit/next-sass packages are deprecated
You are forced to remove the above packages when switching to Webpack 5 version of Next.js

And the problem is that without e.g. @zeit/next-css package, all global CSS imports in other monorepo packages (that are imported in your Next.js app) results in error mentioned in issue description

Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

So basically next-transpile-modules is currently the only solution for me to use both monorepo and Next.js.

P.S. I'll try to run and test the mentioned branch. Thank You for preparing that!

martpie · 2021-05-17T20:52:02Z

Sorry, I was not precise enough:

all global CSS imports in other monorepo packages (that are imported in your Next.js app)

Can you detail this in particular? Your setup, how your files are organized, are you using exactly the same convention as Next.js with .module.css, etc etc?

karol-f · 2021-05-17T21:31:31Z

@martpie Ok, I run some tests on 7c1039bbcc5cc316c53c7222cbc38bde5b61ce70 commit (global-css-improvements branch) and there are still errors about global CSS.

My project folder structure is something like this:

.
└── packages
    ├── components
    │   ├── map
    │   │   └── Map.tsx --> import './some-local-styles.css'
    │   └── media
    │       └── Picker.tsx --> import 'react-image-crop/dist/ReactCrop.css' 
    ├── search-widget
    │   └── Datepicker.tsx --> import 'react-datepicker/dist/react-datepicker.css'
    ├── next.js app
    └── other non-next.js app consuming componets

Next.js app is one of a few that consume components and search-widget packages. This packages:

use styled components (no problem)
import local CSS (problem)
import CSS from NPM dependencies like react-datepicker(problem)

As these components are used also in other apps that are non-next.js, the .module.css approach is not something I consider now.

Example error on 7c1039bbcc5cc316c53c7222cbc38bde5b61ce70 commit:

../../node_modules/react-datepicker/dist/react-datepicker.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.tsx. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ../search-widget/components/DateRangePicker/DateRangePicker.tsx

Regards!

martpie · 2021-05-17T22:20:22Z

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

karol-f · 2021-05-21T07:45:22Z

Workaround for now, if you are using something like styled components in packages consumed by Next, you can use something like this:

import datePickerCss from '!!raw-loader!react-datepicker/dist/react-datepicker.css'; // load CSS as a string into variable
import { Global } from '@emotion/core'; // You can use solutions from styled components or material-ui if you are using it

and

<Global styles={{ datePickerCss }} />

Works for me.

martpie · 2021-05-21T12:30:05Z

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

samuelcastro closed this as completed Dec 9, 2020

samuelcastro reopened this Dec 9, 2020

martpie closed this as completed Jan 13, 2021

martpie reopened this Jan 13, 2021

This was referenced Feb 4, 2021

Global CSS improvements #166

Closed

sibling package's *.module.css being parsed incorrectly #83

Closed

UlyssesInvictus mentioned this issue Feb 11, 2021

Does not work with NextJS due to Next not supporting global CSS files bl00mber/react-phone-input-2#383

Closed

martpie mentioned this issue Feb 17, 2021

Getting "CSS Modules cannot be imported from within node_modules." with 4.0.0 and next 9.5.0 #95

Closed

1 task

martpie added this to the 7.x milestone May 18, 2021

martpie closed this as completed May 21, 2021

cmawhorter mentioned this issue Jun 15, 2021

Server Side Rendering doesn't work with latest NextJS adobe/react-spectrum#1156

Closed

nhducit mentioned this issue Jul 3, 2021

TypeError: Cannot set property 'styles' of undefined #222

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global CSS cannot be imported from within node_modules #146

Global CSS cannot be imported from within node_modules #146

samuelcastro commented Dec 9, 2020 •

edited

Loading

samuelcastro commented Dec 9, 2020

samuelcastro commented Dec 9, 2020 •

edited

Loading

martpie commented Dec 28, 2020

samuelcastro commented Jan 13, 2021

martpie commented Jan 13, 2021

samuelcastro commented Jan 13, 2021 •

edited

Loading

martpie commented Jan 13, 2021

nhducit commented Jan 18, 2021 •

edited

Loading

samuelcastro commented Jan 18, 2021

nhducit commented Jan 21, 2021 •

edited

Loading

martpie commented Jan 21, 2021

nhducit commented Jan 21, 2021

martpie commented Jan 21, 2021

nhducit commented Jan 21, 2021

nhducit commented Jan 21, 2021 •

edited

Loading

Naterra commented Jan 26, 2021 •

edited

Loading

martpie commented Jan 26, 2021

martpie commented Feb 1, 2021

nhducit commented Feb 1, 2021

samuelcastro commented Feb 1, 2021

KB1RMA commented Feb 15, 2021

martpie commented Feb 15, 2021

karol-f commented May 17, 2021

martpie commented May 17, 2021 •

edited

Loading

karol-f commented May 17, 2021 •

edited

Loading

martpie commented May 17, 2021

karol-f commented May 17, 2021 •

edited

Loading

martpie commented May 17, 2021 •

edited

Loading

karol-f commented May 21, 2021 •

edited

Loading

martpie commented May 21, 2021

Global CSS cannot be imported from within node_modules #146

Global CSS cannot be imported from within node_modules #146

Comments

samuelcastro commented Dec 9, 2020 • edited Loading

samuelcastro commented Dec 9, 2020

samuelcastro commented Dec 9, 2020 • edited Loading

martpie commented Dec 28, 2020

samuelcastro commented Jan 13, 2021

martpie commented Jan 13, 2021

samuelcastro commented Jan 13, 2021 • edited Loading

martpie commented Jan 13, 2021

nhducit commented Jan 18, 2021 • edited Loading

samuelcastro commented Jan 18, 2021

nhducit commented Jan 21, 2021 • edited Loading

martpie commented Jan 21, 2021

nhducit commented Jan 21, 2021

martpie commented Jan 21, 2021

nhducit commented Jan 21, 2021

nhducit commented Jan 21, 2021 • edited Loading

Naterra commented Jan 26, 2021 • edited Loading

martpie commented Jan 26, 2021

martpie commented Feb 1, 2021

nhducit commented Feb 1, 2021

samuelcastro commented Feb 1, 2021

KB1RMA commented Feb 15, 2021

martpie commented Feb 15, 2021

karol-f commented May 17, 2021

martpie commented May 17, 2021 • edited Loading

karol-f commented May 17, 2021 • edited Loading

martpie commented May 17, 2021

karol-f commented May 17, 2021 • edited Loading

martpie commented May 17, 2021 • edited Loading

karol-f commented May 21, 2021 • edited Loading

martpie commented May 21, 2021

samuelcastro commented Dec 9, 2020 •

edited

Loading

samuelcastro commented Dec 9, 2020 •

edited

Loading

samuelcastro commented Jan 13, 2021 •

edited

Loading

nhducit commented Jan 18, 2021 •

edited

Loading

nhducit commented Jan 21, 2021 •

edited

Loading

nhducit commented Jan 21, 2021 •

edited

Loading

Naterra commented Jan 26, 2021 •

edited

Loading

martpie commented May 17, 2021 •

edited

Loading

karol-f commented May 17, 2021 •

edited

Loading

karol-f commented May 17, 2021 •

edited

Loading

martpie commented May 17, 2021 •

edited

Loading

karol-f commented May 21, 2021 •

edited

Loading