Next.js: Absolute Imports and aliases feature does not work with Webpack 5 + TypeScript + Yarn PnP

Created on 6 Sep 2020 · 7Comments · Source: vercel/next.js

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

Use Webpack 5 beta
Use TypeScript
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

story

Source

simnalamburt

Most helpful comment

It's a webpack bug about handling yarn pnp

sokra on 7 Sep 2020

👍3

All 7 comments

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
  }
}

simnalamburt on 6 Sep 2020

It's a webpack bug about handling yarn pnp

sokra on 7 Sep 2020

👍3

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

merceyz on 10 Sep 2020

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
https://github.com/vercel/next.js/issues/16892#issuecomment-690705139,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABB235OXJJM2OHELUIFEBQ3SFEYO5ANCNFSM4Q44LXRA
.