Closed haggen closed 3 years ago
@haggen Next.js does not allow importing JS files in node_modules
that end up importing CSS files for the reasons described in https://nextjs.org/docs/messages/css-npm
The file you are importing (directly or indirectly) is antd/lib/button/style/index.js
The contents of the file are here https://unpkg.com/antd@4.15.4/lib/button/style/index.js :
require("../../style/index.less");
require("./index.less");
and that's why Next.js throws an error.
It would be the same if it was a .css
import and not .less import. So this is "expected" according to Next.
The solution is to import the .less
files in your pages/_app
instead of importing a JS file that imports them:
import 'antd/lib/style/index.less';
import 'antd/lib/button/style/index.less';
Hope this helps!
Hey @elado thanks for the great answer! That confirms my understanding, but I still wonder, is that how you did on your projects using Antd?
Doing that would import those styles on every page, even ones not using any Antd components.
The way I'm doing it right now is bypassing this rule so I can import the style with the component when I use, where I use it, dramatically reducing the weight of the page.
The current project I'm migrating loads the entire antd less file so haven't gotten there yet.
This is an interesting question I'd raise to the Next.js team - it's not exclusive to Less/Ant.
Perhaps you can combine css-modules and :global
to load global CSS in a scoped manner:
/* styles/home.module.less */
.container :global {
@import "~ant/lib/button/style/index.less";
}
// pages/home.js
import styles from '../styles/home.module.less'
..
return <div className={styles.container}><Button>..
The current project I'm migrating loads the entire antd less file so haven't gotten there yet.
Did you have any luck migrating?
Hi, I tried to enable webpack5 with this plugin but ended up getting this error:
Which makes sense since we assert Less code is side effect free. But I was wondering how did you make it work on your project?