New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Global CSS cannot be imported from within node_modules." error in Next.js #4035
Comments
cc @redallen |
There is currently no solution since Next.js dropped support for importing CSS in JS (virtually every other bundler does). Sorry! |
Can we take another look at this @redallen? |
I've tried the following module.exports = {
future: {
webpack5: true
},
webpack(config, { isServer }) {
// Remove existing css rule
config.module.rules.pop();
// SSR doesn't care about CSS
const cssRule = {
test: /\.css$/,
//include: __dirname
};
if (isServer) {
cssRule.use = require.resolve('null-loader')
}
else {
cssRule.use = [
MiniCssExtractPlugin.loader,
require.resolve('css-loader')
];
config.plugins.push(
new MiniCssExtractPlugin()
);
}
// Add our cssRule
config.module.rules.push(cssRule);
return config;
}
} It gives the following error: ./node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
> Build error occurred
Error: > Build failed because of webpack errors
at /home/thesm/src/next-app/node_modules/next/dist/build/index.js:17:924
at async Span.traceAsyncFn (/home/thesm/src/next-app/node_modules/next/dist/telemetry/trace/trace.js:6:584) I believe Next.js is further modifying my config despite saying "Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected." I'll pursue this issue upstream. |
Oops, didn't mean to close. Sorry. |
I managed to get it to work using a patched version of next-transpile-modules in order to enable support for global CSS imports. See the following changes fabianishere/next-transpile-modules@5f61c10. However, at this point, you are deep inside Next.js internals, so I wouldn't consider this an ideal solution. Let's hope this functionality can be integrated into Next.js. |
@redallen Sorry if this is the incorrect place to ask, but is there a reason as to why Although we might get Global CSS imports to work natively in Next.js at some point, it cannot benefit from treeshaking: https://github.com/vercel/next.js/blob/96f9945ecb24b3cdcce58e8fb6e4311e93b7a1d2/packages/next/build/webpack/config/blocks/css/index.ts#L190 |
CSS modules are preferable but:
The initial authors of this library quite liked the idea of As for tree shaking most components use all of their* provided classes so there isn't much to gain tree-shaking individual CSS files. |
@fabianishere Do you have a sample code of using it somewhere? |
@wojta With the patched version of const withTM = require('next-transpile-modules')(['@patternfly/react-core', '@patternfly/react-styles'])
module.exports = withTM({
future: {
webpack5: true,
},
}); I am working now with the author of that package to upstream these changes. |
@fabianishere solution seems to be working. Thanks! It's necessary to add all modules that are used with PatternFly otherwise you'll get an error. |
@wojta For if you haven't seen it yet, the changes have now been integrated into |
@fabianishere, in my case the solution you provided does not work. As a result, I had no styles at all: my own and patternfly's. The issue appears on latest nextjs (10.2.2). |
@altwarg By no styles at all, do you mean the stylesheets are not loaded for the Patternfly component you are importing? Does this happen in development or production mode? |
I cannot reproduce the issue. Could you check whether the following example works: https://github.com/fabianishere/next.js/tree/examples/patternfly-4/examples/with-patternfly |
@fabianishere, I checked this example from the What I've done:
This option sets that we can change the steps in the Wizard only when we click the Next or Back buttons. Otherwise we could click on the step itself to move to it.
No idea how to fix this. |
This is because you are using CSS modules, which will transform the selectors to something different to prevent name clashes with global CSS. To get this to work, you can do the following: .customWizard :global(.pf-c-wizard__nav-link.pf-m-current:disabled)::before {
background-color: rgb(0, 102, 204) !important;;
color: rgb(255, 255, 255) !important;;
}
.customWizard :global(.pf-c-wizard__nav-link:disabled)::before {
background-color: rgb(240, 240, 240) !important;
}
.customWizard :global(button.pf-c-wizard__nav-link.pf-m-current.pf-m-disabled) {
color: rgb(0, 102, 204) !important;
} import { customWizard } from './index.module.css'
import { useState } from 'react'
import { Button, Wizard } from '@patternfly/react-core'
import { CogIcon } from '@patternfly/react-icons'
const steps = [
{ name: 'Step 1', component: <p>Step 1</p>, canJumpTo: false },
{ name: 'Step 2', component: <p>Step 2</p>, canJumpTo: false },
{ name: 'Step 3', component: <p>Step 3</p>, canJumpTo: false },
{ name: 'Step 4', component: <p>Step 4</p>, canJumpTo: false },
{ name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish', canJumpTo: false },
]
export default function Home() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<Button
variant="primary"
onClick={() => setIsOpen(true)}
style={{ margin: 20 }}
icon={<CogIcon />}
>
Show Wizard
</Button>
{isOpen && (
<Wizard
className={customWizard}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Simple Wizard"
description="Simple Wizard Description"
steps={steps}
/>
)}
</>
)
} |
@fabianishere, your approach can be applied to customize standard patternfly styles. But my own for my own components don't work as well. |
There is another way to do it in Next.js at the moment: https://nextjs.org/docs/messages/css-global |
@fabianishere, well, global css can be applied, but to be honest: I found no performance improvements or behavior differences using approach you mentioned vs the approach I mentioned in patternfly/patternfly-react#5756. Node process still requires ~1-1.2 GB of RAM and from 30-40% of CPU usage to work in development (in production mode everything is fine). No idea how to deal with it but it is really annoying. |
@altwarg Does this only happen once you start using Of course, some additional CPU/RAM usage is expected as it needs to transpile additional source files, but those results should be cached, so it should not happen on every re-render. |
@fabianishere, I've used next-transpile-modules (but older version) before so I believe that my comments are not so relevant. Now I understand why does additional CPU/RAM usage is expected. Your approach is better and requires fewer packages to be installed. Thank you! |
I created a nextjs package Example: https://codesandbox.io/s/nextjs-example-react-md-editor-qjhn7?file=/pages/index.js |
This issue has been automatically marked as stale because it has not had activity in the last 60 days. It will be closed in 30 days if no further activity occurs. |
I'm also facing the "Global CSS cannot be imported from within node_modules." error in Next.js. When I do, const withTM = require('next-transpile-modules')([
'@patternfly/react-core',
'@patternfly/react-styles',
'@patternfly/react-log-viewer',
]);
module.exports = withTM({}); I can render the component successfully, however no CSS styles are applied. Any idea on how to fix this? I'm aware I can import global CSS from a package in the experimental Happy to provide more details if needed, please let me know! |
I was able to solve the issue by adding the following imports to my
|
While using NextJS with Patternfly, this error crops up :
"Global CSS cannot be imported from within node_modules." for About-Modal CSS file import
NextJS suggests to work with the library community (patternfly in this case) to work around this.
More info here : vercel/next.js#19936
Is there some woraround to make patternfly to work with NextJS (Note : I already tried out https://github.com/vercel/next.js/tree/canary/examples/with-patternfly without much success)
The text was updated successfully, but these errors were encountered: