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

[simnalamburt]

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

• Add support for paths in tsconfig.json and jsconfig.json #11293
• Enable "paths" support by default #11970
• https://github.com/vercel/next.js/blob/489cad36bc/packages/next/build/webpack-config.ts#L1113

[simnalamburt]

I just checked webpack configs and could confirmed that resolve key was properly modified. Looks like those configs are being ignored in Webpack 5 + TypeScript + Yarn PnP in some reason.

module.exports = {
  webpack: config => {
    console.log(config.resolve.modules)
    console.log(config.resolve.plugins)
    return config
  }
}

[sokra]

It's a webpack bug about handling yarn pnp

[merceyz]

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

[simnalamburt]

If I shouldn’t use this feature, this behavior should be removed from the document. 2020년 9월 11일 (금) 05:22, Kristoffer K. <notifications@github.com>님이 작성:

…

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 <#16892 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABB235OXJJM2OHELUIFEBQ3SFEYO5ANCNFSM4Q44LXRA> .

[jensmeindertsma]

Does someone have a link to the related issue on the Webpack repository ( as it is a Webpack-side problem )?

[simnalamburt]

webpack/enhanced-resolve#245 has been merged, I'll try this again and close this if it's fixed.

[simnalamburt]

Resolved in Webpack 5.0.0 and Next.js 9.5.5. @sokra Thanks for your effort!!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.