question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to configure modular imports for antd with babel-import-plugin

See original GitHub issue

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:

  1. clone this repo subodh-malgonde/next-antd-babel-import-plugin-bug
  2. npm install
  3. npm run dev
  4. Navigate to http://localhost:3000
  5. 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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:7
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
MichaelITcommented, Apr 9, 2020

any update?

1reaction
carvinlocommented, Mar 10, 2021

@gaozhitw @ye-will Thanks for sharing the solution, but it doesn’t work for me: next@10.0.8

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I use .babelrc to get babel-plugin-import working for ...
First clean up the config files you created, and make sure you have babel-plugin-import installed. Then eject your app: npm run eject.
Read more >
Fixing AntD CSS Module Imports in Create React App with ...
Using CRACO to override Webpack to get CSS Module imports working with Create React App and Ant Design. Includes complete code snippets.
Read more >
5 steps to change antd theme on runtime using create-react-app
Before we start, install antd on your app (create-react-app) and add ... I tried installing the specific versions of babel-import-plugin, ...
Read more >
Contribute to vercel/next.js · GitHub
More than 83 million people use GitHub to discover, fork, and contribute to ... Unable to configure modular imports for antd with babel-import-plugin...
Read more >
Build a React Component Library with Ant Design ... - Medium
Remove babel-import-plugin and use manual imports; Override Styleguidist config: npm install --save-dev customize-cra@^0.9.1 react-scripts@^3.4.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found