modularizeImports for @ant-design/icons is failing for not exported methods

[rafaelalmeidatk]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.1.0
Relevant Packages:
  next: 13.4.9-canary.2
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

SWC transpilation

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/intelligent-aryabhata-s28tgc?file=%2Fapp%2Fpage.tsx%3A6%2C1-6%2C33

To Reproduce

Open the reproduction and see the error:

./app/page.tsx:3:0
Module not found: Can't resolve '@ant-design/icons/getTwoToneColor'

Describe the Bug

The new default modularizeImports works great for the icons of @ant-design/icons but this library also exports a few methods that don't have a respective file exported. For example, when trying to import the createFromIconfontCN method, Next.js will crash because @ant-design/icons/createFromIconfontCN is not valid

I am unsure if there is a possible fix on Next.js's side with the current code because the options for modularizeImports are all very simple. Maybe we could add a regex field that allows SWC to skip an import if the regex matches the member of the import, something like this (I didn't think too much about the API but its just an idea):

const nextConfig = {
  modularizeImports: {
    "@ant-design/icons": {
      transform: '@ant-design/icons/lib/icons/{{member}}',
      skipMember: /^[a-z]/,
    },
  },
}

edit: I thought about this a bit more and ignoring a specific member doesn't make sense because having the normal import even for a single method would bundle the entire library which was the initial problem. The problem might need to be fixed on the other library side

Expected Behavior

The reproduction should work with no issues

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1426

[ycalm]

have the same issue

"@ant-design/icons": "^5.0.1",
 "antd": "^5.3.2",
 "eslint": "8.44.0",
 "eslint-config-next": "13.4.8",
 "next": "13.4.8",
 "react": "18.2.0",
 "react-dom": "18.2.0",
 "typescript": "5.1.6"

[masnormen]

I think currently SWC doesn't support custom import transform depending on the member name (or excluding them). While waiting for a solution, you can temporarily fix this by changing the import source:

// getTwoToneColor, setTwoToneColor

import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons/lib/components/twoTonePrimaryColor';

// createFromIconfontCN

import createFromIconfontCN from '@ant-design/icons/lib/components/IconFont';

Hope this helps. I also suggest you to make a feature request on SWC's repo

[shuding]

Fixed in #53051.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.