Absolute Imports and aliases feature does not work with Webpack 5 + TypeScript + Yarn PnP

Bug report

Describe the bug

Absolute Imports and aliases feature does not work with Webpack 5 + TypeScript + Yarn PnP. To reproduce this bug, all these three conditions must be met

1. Use Webpack 5 beta
2. Use TypeScript
3. Use Yarn PnP

To Reproduce

mkdir -p pages
cat <<'EOF' > pages/index.tsx
import MyComponent from 'components/MyComponent'

export default function Index() {
  return <MyComponent/>
}
EOF

mkdir -p components
cat <<'EOF' > components/MyComponent.tsx
export default function Index() {
  return <h1>Hi</h1>
}
EOF

cat <<'EOF' > tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext", "dom", "dom.iterable"],
    "noEmit": true,
    "jsx": "preserve",

    // Strict Typecheck
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    // Module
    "esModuleInterop": true,
    "moduleResolution": "node",
    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true,

    // Path alias
    "baseUrl": ".",

    // Next.js suggestion
    "allowJs": true,
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
EOF

cat <<'EOF' > package.json
{
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "typescript": "^4.0.2"
  },
  "resolutions": {
    "webpack": "^5.0.0-beta.29"
  },
  "devDependencies": {
    "@types/node": "^14.6.4",
    "@types/react": "^16.9.49"
  }
}
EOF

yarn set version berry
yarn install
yarn next dev

Expected behavior

Running webpage

Screenshots

ready - started server on http://localhost:3000
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /
wait  - compiling...
error - ./pages/index.tsx:1:0
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: components (via "components/MyComponent")
Required by: /home/simnalamburt/workspace/a/pages/

> 1 | import MyComponent from 'components/MyComponent'
  2 |
  3 | export default function Index() {
  4 |   return <MyComponent/>
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./pages/index.tsx:1:0
Module not found: Your application tried to access components, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: components (via "components/MyComponent")
Required by: /home/simnalamburt/workspace/a/pages/

> 1 | import MyComponent from 'components/MyComponent'
  2 |
  3 | export default function Index() {
  4 |   return <MyComponent/>
wait  - compiling...
event - compiled successfully

System information

• OS: Debian GNU/Linux 10
• Version of Next.js: 9.5.3, 9.5.4-canary.3
• Version of Node.js: 14.9.0

Reference

• https://github.com/vercel/next.js/pull/11293
• https://github.com/vercel/next.js/pull/11970
• https://github.com/vercel/next.js/blob/489cad36bc/packages/next/build/webpack-config.ts#L1113

[simnalamburt]

If I shouldn’t use this feature, this behavior should be removed from the document.

2020년 9월 11일 (금) 05:22, Kristoffer K. [e-mail]님이 작성:

You shouldn’t use path mapping like that, it’s better to use the link protcol as that is tool agnostic https://yarnpkg.com/features/protocols#why-is-the-link-protocol-recommended-over-aliases-for-path-mapping

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vercel/next.js/issues/16892#issuecomment-690705139, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABB235OXJJM2OHELUIFEBQ3SFEYO5ANCNFSM4Q44LXRA .

[sokra]

It’s a webpack bug about handling yarn pnp