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

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

Open
BaileyMillerSSI opened this issue May 13, 2024 · 0 comments
Open
Labels
bug Issue was opened via the bug report template. create-next-app Related to our CLI tool for quickly starting a new Next.js application. Developer Experience Issues related to Next.js logs, Error overlay, etc. Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js.

Comments

@BaileyMillerSSI
Copy link

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 BaileyMillerSSI added the bug Issue was opened via the bug report template. label May 13, 2024
@github-actions github-actions bot added create-next-app Related to our CLI tool for quickly starting a new Next.js application. Developer Experience Issues related to Next.js logs, Error overlay, etc. Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js. labels May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. create-next-app Related to our CLI tool for quickly starting a new Next.js application. Developer Experience Issues related to Next.js logs, Error overlay, etc. Module Resolution Module resolution (CJS / ESM, module resolving) Webpack Related to Webpack with Next.js.
Projects
None yet
Development

No branches or pull requests

1 participant