Skip to content
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

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

Open
subodh-malgonde opened this issue Mar 27, 2020 · 9 comments
Open
Labels
good first issue Easy to fix issues, good for newcomers

Comments

@subodh-malgonde
Copy link

subodh-malgonde commented Mar 27, 2020

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 #9830

@subodh-malgonde
Copy link
Author

subodh-malgonde commented Mar 28, 2020

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?

@timneutkens timneutkens added good first issue Easy to fix issues, good for newcomers help wanted labels Mar 30, 2020
@lucasbastianik
Copy link

lucasbastianik commented Apr 1, 2020

@MichaelIT
Copy link

any update?

@mit123suki
Copy link
Contributor

#11837 check the babelrc file and it should fix modular imports problem

@gaozhitw
Copy link

vercel/next-plugins#598 (comment)

I use this configure, it's working.

@ye-will
Copy link

ye-will commented Apr 24, 2020

https://github.com/ye-will/next-plugin-antd

This plugin may help.

@Timer Timer removed the help wanted label Jun 3, 2020
@carvinlo
Copy link

@gaozhitw @ye-will Thanks for sharing the solution, but it doesn't work for me:
[email protected]

@andrey-semin
Copy link

Seems like the solutions here are bit outdated. Is there a working solution for current versions of Next/Antd?

@mikku489
Copy link

bump

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Easy to fix issues, good for newcomers
Projects
None yet
Development

No branches or pull requests