Module not found: Can't resolve 'antd/lib/qr-code'

[zombieJ]

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.10-canary.8
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A


warn  - Latest canary version not detected, detected: "13.4.10-canary.8", newest: "13.4.10".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

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

CLI (create-next-app)

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

https://codesandbox.io/p/github/alyosha-30emeciel/antd-qrcode-bug/csb-6xksxs/draft/happy-burnell?file=/package.json:18,20

To Reproduce

just run npm start

Describe the Bug

Expected Behavior

QRCode path should be qrcode, not qr-code. NextJS convert to the wrong path.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[naveen8801]

Hi @zombieJ, I'd like to check this, is this issue open?

[zombieJ]

@naveen8801 Please feel free to help on this : )

[naveen8801]

@zombieJ, I think I have found exact reason behind this behavior. Please check config.ts here and example for this config is here

kebabCase related change was introduced 2 weeks ago PR link

I tried removing kebabCase which resulted in same error for other imports e.g ConfigProvider

[alyosha-30emeciel]

May I try to add an exception in my project's 'next.config.js' file as a workaround ?
I'm not sure about how it works. Maybe this?

/** @type {import('next').NextConfig} */
const nextConfig = {
    modularizeImports: {
        'antd/lib/QRCode': {
            transform: 'antd/lib/qrcode',
        },
    },
}

module.exports = nextConfig

[zombieJ]

In most case, naming can be kebabCase. But QRCode is not kebabCase as qr-code in antd path.

[balazsorban44]

Related/duplicate issue: #52307 I'm going to close this in favor, feel free to comment further there!

[github-actions]

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