react-bootstrap Module not found when import any hooks

[Cow258]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: 8.6.3
    Relevant Packages:
      next: 13.4.9
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

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

No response

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

https://github.com/Cow258/import-issue

https://codesandbox.io/p/github/Cow258/import-issue/main

To Reproduce

git clone [email protected]:Cow258/import-issue.git
pn i
pn dev

Describe the Bug

After #50900 added default modularizeImports config,
We are unable to import any hooks (like useAccordionButton) from react-bootstrap,
This will cause an error Module not found: Can't resolve 'react-bootstrap/useAccordionButton'

Maybe we should remove react-bootstrap from default modularize imports config

Compromise solution

Add the following config into next.config.js

const nextConfig = {
  webpack: config => {
    let modularizeImports = null
    config.module.rules.some(rule => (
      rule.oneOf?.some(oneOf => {
        modularizeImports = oneOf?.use?.options?.nextConfig?.modularizeImports
        return modularizeImports
      })
    ))
    if (modularizeImports?.['react-bootstrap'])
      delete modularizeImports['react-bootstrap']
    return config
  }
}

Expected Behavior

We can import any components and hooks from react-bootstrap

Which browser are you using? (if relevant)

Chrome 114.0.5735.198

How are you deploying your application? (if relevant)

Vercel

_NEXT-1425

[balazsorban44]

Correct, looks like this hook is imported from a file with a different name: https://github.com/react-bootstrap/react-bootstrap/blob/b124070af07fa1400d5e9690bb2e35a8d3315ec4/src/index.tsx#L8-L11C9

[Super-Kenil]

I had the same issue while importing useAccordionButton.
I fixed it by importing it like this: import { useAccordionButton } from 'react-bootstrap/AccordionButton'

[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.