yarnpkg / yarnpkg/berry

[Bug?]: Yarn interferes with module resolution with Docusaurus and Webpack, node-modules linker

Open
#6,944 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.1k
Forks
1.3k
PR merge metrics
No merged PRs in 30d

Description

Self-service
  • I'd be willing to implement a fix
Describe the bug

The issue is a bit bizarre to start with. In a repo that uses docusarus I tried bumping yarn from 4.1.1 to the newest 4.10.3 and I encountered this bug.

In docusaurus docs I import typescript for an interactive playground. The docs build just fine. However, upgrading yarn yields the following error, coming from webpack:

[ERROR] Client bundle compiled with errors therefore further build is impossible.
Module not found: Error: Can't resolve 'module' in '/Users/user/my-website/node_modules/typescript/lib'

Clearly something is wrong as there's no module file or module dir in typescript/lib and this lookup doesn't make sense.

When I went into further debugging and I did the following change to the package.json of TS package:

    "browser": {
        "fs": false,
        "os": false,
        "path": false,
        "crypto": false,
        "buffer": false,
        "source-map-support": false,
        "inspector": false,
        "perf_hooks": false,
+       "typescript": "./lib/module.js" 
    },

The build worked but then it failed at runtime

Image

What's interesting here is that pnp is mentioned in the stack trace but my setup doesn't use pnp. My guess would be that something in the environment in yarn changed so that pnp is used even when it shouldn't.

To reproduce

To create a blank docusarus project:

  1. npx create-docusaurus@latest my-website classic --typescript --skip-install.

Setup yarn in repository:

  1. cd my-website
  2. yarn set version 4.1.1
  3. yarn config set nodeLinker node-modules
  4. yarn config set enableGlobalCache false

Add typescript as a dependency:

  1. yarn add typescript@5.8.3

Add the following in the top level of src/pages/index.tsx to include typescript in the built docs:

// src/pages/index.tsx
import ts from "typescript";

console.log(
  ts.transpileModule("function foo():void {}", {
    compilerOptions: { sourceMap: true },
  }).sourceMapText
);

Run the build and see that it passes without errors:

  1. yarn build

Bump yarn version to 4.10.3 and make sure to wipe all the caches:

  1. yarn set version 4.10.3
  2. rm -fr build .docusaurus node_modules .yarn yarn.lock

Run yarn build again to get the error.

Environment
System:
    OS: macOS 15.6
    CPU: (14) arm64 Apple M4 Pro
  Binaries:
    Node: 22.14.0 - /private/var/folders/jg/m839qn593nn7w_h3n0r9k25c0000gn/T/xfs-4e799f27/node
    Yarn: 4.10.3 - /private/var/folders/jg/m839qn593nn7w_h3n0r9k25c0000gn/T/xfs-4e799f27/yarn
    npm: 10.9.2 - /Users/bigpoppe/.nvm/versions/node/v22.14.0/bin/npm
Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the failure with src/pages/index.tsx, the two Yarn versions, node-modules linker, and the documented cache cleanup, then compare the yarn build results. Inspect the TypeScript package.json browser mapping and the resolution path that reports pnp; done means explaining the 4.10.3 regression and restoring the build without the package.json workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.