ant-design: Followed steps of "Use modularized antd" and got an error

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Started a new project with Next.js
Followed the steps in the site of antd: here.
Use babel-plugin-import
Config of .babelrc
Got a error of module.

What is expected?

Import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will need automatically import stylesheets.

What is actually happening?

Codesandbox

import { Row } from '../grid';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/row (/sandbox/.next/server/static/development/pages/index.js:225:18)
    at __webpack_require__ (/sandbox/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/sandbox/.next/server/static/development/pages/index.js:140:69)
    at __webpack_require__ (/sandbox/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (/sandbox/.next/server/static/development/pages/index.js:191:18)
    at __webpack_require__ (/sandbox/.next/server/static/development/pages/index.js:23:31)
    at module.exports../node_modules/antd/es/button/style/index.js (/sandbox/.next/server/static/development/pages/index.js:91:18)
    at Object.<anonymous> (/sandbox/.next/server/static/development/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

Localhost

import { Row } from '../grid';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1067:16)
    at Module._compile (internal/modules/cjs/loader.js:1115:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)

Environment	Info
antd	4.1.0
React	16.13.1
System	Mac OS
Browser	Chrome

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 16 (3 by maintainers)

Most upvoted comments

https://github.com/zeit/next.js/issues/5180#issuecomment-500704225

https://github.com/zeit/next.js/issues/9830

https://medium.com/anna-coding/how-to-config-ant-design-in-next-js-with-custom-theme-b704022591af

https://github.com/hanpama/next-with-antd

afc163 on Apr 1, 2020

@annacoding2020 thanks for the article, it works perfectly for antd with less + custom variables 👍 it doesn’t work if you have another library that depends on antd though, e.g. @ant-design/pro-table (idk if the issue is only with this library), probably because @ant-design/pro-table also requires some antd styles itself. do you have any workaround for that?

for reference, here’s the error and its stack trace:

@import './themes/index';
^

SyntaxError: Invalid or unexpected token
    at compileFunction (<anonymous>)
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/.../node_modules/antd/lib/badge/style/index.js:3:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/.../node_modules/@ant-design/pro-table/lib/component/status/index.js:8:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)

@smddzcy I can check this

annacoding2020 on Apr 10, 2020

@lucasbastianik

You can try the latest update in the article below

https://annacoding.com/article/2cU5baQMXG8SV2pbxh7kO8/How-to-config-Ant-Design--in-Next.js-with-custom-theme?

annacoding2020 on Apr 2, 2020