Next.js: Unable to configure modular imports for antd with babel-import-plugin

Created on 27 Mar 2020 · 6Comments · Source: vercel/next.js

Bug report

Describe the bug

I am using antd in my nextjs project. Importing the entire css bundle via import 'antd/dist/antd.css' works, however I would like to have modular imports to reduce by page load speed.

So I followed instruction from ant-design/babel-plugin-import to configure modular imports. However, I get an error when I try a modular import (in my case Table component of antd):

[ error ] ./node_modules/antd/es/button/style/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/antd/es/button/style/css.js
/Users/subodh/workspace/next-antd-babel-import-plugin-bug/node_modules/antd/es/table/style/css.js:1
import '../../style/index.css';
       ^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

clone this repo subodh-malgonde/next-antd-babel-import-plugin-bug
npm install
npm run dev
Navigate to http://localhost:3000
See error in your terminal

The error is triggered due to this line:

import { Table } from "antd";

Expected behavior

There should be no error and the above modular import should work fine:

Screenshots

Not applicable

System information

OS: macOS

package.json

{
  "name": "next-antd-babel-import-plugin-bug",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "antd": "^4.0.4",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-inline-import": "^3.0.0",
    "next": "9.3.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "sass": "^1.26.3"
  }
}

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css",
        "libraryDirectory": "es"
      }
    ]
  ]
}

src/pages/ _app.js

import '../styles.scss'

function MyApp({Component, pageProps}) {
    return <Component className="app" {...pageProps} />
}

export default MyApp

src/styles.scss

$backgroundColor: #2ecc71;

.app {
  background-color: $backgroundColor;
}

src/pages/index.js

import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "title",
    key: "title"
  },
    {
    title: "Age",
    dataIndex: "age",
    key: "age"
  }
];

export class Home extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: [
          {
            title: "John Doe",
            age: 28
          },
          {
            title: "Johnny Doe",
            age: 29
          }
      ]
    }
  }
  render() {
    return (
      <>
        <main>
          <h1>Hello World</h1>
          <Table
            columns={columns}
            dataSource={this.state.data}
            pagination={false}
            rowKey="id"
          />
        </main>
      </>
    );
  }
}

export default Home

Additional context

I think it is related to this issue https://github.com/zeit/next.js/issues/9830

good first issue

Source

subodh-malgonde

👍6

All 6 comments

I think I figured out what the problem is. Antd uses .less files but Nextjs' builtin CSS support does not support .less files. So we need to use @zeit/next-less.

However, if we use @zeit/next-less, it disables the built in CSS support for .scss files. This causes problems for me because I use .scss files.

Is there a workaround to this?

subodh-malgonde on 28 Mar 2020

Same problem here: https://github.com/lucasbastianik/next-with-antd-modularized-error