vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.94k stars 26.87k forks source link

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

Open BaileyMillerSSI opened 5 months ago

BaileyMillerSSI commented 5 months ago

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: https://github.com/ant-design/ant-design-icons/issues/619 https://github.com/ant-design/ant-design-icons/issues/605

nicogulo commented 4 months ago

any update on this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

BaileyMillerSSI commented 4 months ago

@nicogulo This fixed it for me https://github.com/ant-design/ant-design/issues/46053#issuecomment-1905553667

nicogulo commented 4 months ago

thanks @BaileyMillerSSI, works for me

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

HarryZ10 commented 3 months ago

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

JackieLi565 commented 3 months ago

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/icons@5.3.6

afc163 commented 3 months ago

Fixed in @ant-design/icons@5.4.0: https://github.com/ant-design/ant-design-icons/pull/653