Next >14.0.1 cannot use @ant-design/icons (unexpected token 'export')

[BaileyMillerSSI]

Link to the code that reproduces this issue

https://github.com/BaileyMillerSSI/next-ant-design-demo

To Reproduce

1. Create a new project with npx create-next-app@latest (I selected typescript, tailwind, src dir (pages), and other defaults)
2. npm install @ant-design/icons
3. Modify the index.tsx file to include an ant design icon

Current vs. Expected behavior

Displayed error:

~\bad-ant-icons-demo\node_modules\@ant-design\icons-svg\es\asn\AccountBookFilled.js:3
export default AccountBookFilled;
^^^^^^

SyntaxError: Unexpected token 'export'

In an existing project I was previously on Next 14.0.1 and upgraded to 14.1.1 to resolve the published security issue. After upgrading I was unable to use ant-design/icons. This is demo is in a fresh application.

Expected:
@ant-design/icons would be usable within the base project. I have tried changing the package.json to be type: module and that has no affect. It seems that either or both of these are true; something was broken in next during the upgrade to >14.0.1 or ant-design/icons had a bug hidden in it that upgrading next to >14.0.1 exposed as a build error.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 32466  
  Available CPU cores: 24       
Binaries:
  Node: 22.1.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Developer Experience, Module Resolution, Webpack

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

As far I can tell this appears to be an issue with @ant-design/icons BUT next didn't complain about it until >14.0.1. With teams upgrading to resolve the security issue fixed in next 14.1.1 I suspect that more users will run into this issue.

Re:
ant-design/ant-design-icons#619
ant-design/ant-design-icons#605

[BaileyMillerSSI]

@nicogulo This fixed it for me ant-design/ant-design#46053 (comment)

[nicogulo]

thanks @BaileyMillerSSI, works for me

@nicogulo This fixed it for me ant-design/ant-design#46053 (comment)

[HarryZ10]

Thanks guys! Took me 5 google searches to find this recent issue.

[JackieLi565]

Seems like the issue only occurs with the Page router. Was able to build successfully with the App router (14.1.1) and @ant-design/[email protected]

[afc163]

Fixed in @ant-design/[email protected]: ant-design/ant-design-icons#653

[nvzoll]

The issue is still present with Pages Router.
Next.js 15.1.2, ant-design/icons 5.5.2
TS compiler options: "target": "esnext", "module": "esnext", "moduleResolution": "bundler"

Error: unhandledRejection SyntaxError: Unexpected token 'export'
    at <project path>\node_modules\ (ant-design\icons-svg\es\asn\ReloadOutlined.js:3)
    at 22446 (<project path>\.next\server\pages\_app.js:1:1117) {
  type: 'SyntaxError'

transpilePackages seems to be the only option.

[morganney]

Have you tried using the full path to import? For example, instead of import { UserOutlined } from "@ant-design/icons" you use import UserOutlined from "@ant-design/icons/UserOutlined".

[nvzoll]

@morganney well, that works (possibly, not 100% sure), but we have 100+ imports of icons in the project, and I don't want to run around replacing those to fix something which is supposed to work the standard way in the first place. And even if I do, IDE will continue to import them the standard way, which will create unnecessary friction for developers.

[morganney]

@nvzoll I know for sure it works, was just pointing it out to you.

You shouldn't be writing barrel files or using them from a library because they're an anti-pattern and the "benefits" aren't worth the downsides.

It takes very little effort to update these imports with some tools, and very little effort to ignore your IDE prompts. You can do that or wait for maintainers to make changes.

I think your IDE is prompting you that way because that's the pattern already in use. Mine seems to prompt differently, well Copilot does:

[nvzoll]

@morganney it still requires much more effort that simply updating your next.config.js with transpilePackages list. What are downsides of this?

N.B. I was referring to 'Quick Fix' menu in VS Code, not copilot. There is considerable effort for scrolling to the top of a source file and writing import manually every time you need an icon.

[nvzoll]

Seems like optimizePackageImports option solves the issue as well when you put the list people suggest to use with transpilePackages. No visible difference in bundle analyzer output though.

[morganney]

The problem is there is no exports defined in the packages package.json file. It was there, but then they removed it in ant-design/ant-design-icons#655.

Although, it might be better if it was defined like:

  "exports": {
    ".": {
      "import": {
        "types": "./lib/index.d.ts",
        "default": "./es/index.js"
      },
      "require": {
        "types": "./lib/index.d.ts",
        "default": "./lib/index.js"
      }
    },
    "./*": {
      "import": {
        "types": "./lib/icons/*.d.ts",
        "default": "./es/icons/*.js"
      },
      "require": {
        "types": "./lib/icons/*.d.ts",
        "default": "./lib/icons/*.js"
      }
    }
  }