패키지 매니저를 Yarn으로 변경하며 발생한 문제

MAJOR.MINOR.PATCH

1.0.0
2.3.4

.
+-- package.json
`-- packages
    +-- a
        `-- package.json

my-monorepo/
├── package.json
└── packages/
    ├── transitive-lib/
    │   ├── package.json
    │   └── index.js
    └── consumer/
        ├── package.json
        └── index.js

npm --workspace=packages/consumer run start

> consumer@1.0.0 start
> node index.js

Hello
fooBar

yarn workspace consumer node index.js

Error: Your application tried to access lodash, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: lodash
Required by: /home/sunub/ghost-dependency/packages/consumer/

현재 위와 같은 import 문에서 'express' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307)

yarn dlx @yarnpkg/sdks vscode

npm install -g nodemon ts-node

[3:33:33 PM] Starting compilation in watch mode...
src/index.ts:1:21 - error TS2307: Cannot find module 'express' or its corresponding type declarations.

1 import express from "express";

// consumer/index.js
const { greet } = require("transitive-lib");
// Ghost Dependency: lodash를 직접 설치하지 않았지만 동작한다!
const _ = require("lodash");

console.log(greet("hello")); // "Hello"
console.log(_.camelCase("foo bar")); // "fooBar"

import express from "express";

const app = express();

type target = es3 | es5 | es6/es2015 | es2016 | es2017 | es2018 | es2019 | es2020 | es2021 | es2022 | es2023 | es2024 | esnext;

function compile(opts: CompileOptions = {}) {
  const target: JSTarget = opts.target ?? "es5"; // 기본 값은 ES5
}

type module =
  | "preserve"
  | "none"
  | "nodenext"
  | "commonjs"
  | "node16"
  | "node18"
  | "esnext"
  | "es2022"
  | "es2020"
  | "es6/es2015"
  | "amd"
  | "umd"
  | "system";

type moduleResolution =
  | "classic"
  | "node/node10"
  | "node16"
  | "nodenext"
  | "bundler"
  | "node18";

type lib =
  | "ES2020"
  | "DOM"
  | "DOM.Iterable"
  | "ES2023"
  | "WebWorker"
  | "ScriptHost";

import x from "@/utils/x";
import { foo } from "./foo";
import "./global.css";

type composite = boolean;

export let helloWorld = "hi";

export declare let helloWorld: string;

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "skipLibCheck": true /* Bundler mode */,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "moduleResolution": "bundler"
  }
}

{
  "name": "@excalidraw/common"
}

{
  "name": "foo",
  "version": "0.0.0",
  "dependencies": {
    "express": "expressjs/express",
    "mocha": "mochajs/mocha#4727d357ea",
    "module": "npm/example-github-repo#feature/branch"
  }
}

// packages/react-button/package.json
{
  "name": "react-button",
  "version": "1.0.0",
  "peerDependencies": {
    "react": "^18.0.0"
  }
}

{
  "name": "react-hook-form",
  "description": "Performant, flexible and extensible forms library for React Hooks",
  "version": "7.57.0",
  "devDependencies": {
    "react": "^19.1.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17 || ^18 || ^19"
  }
}

{
  "name": "my-workspaces-powered-project",
  "workspaces": ["packages/a"]
}

# /packages/transitive-lib/package.json
{
  "name": "transitive-lib",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

# /packages/consumer/package.json
{
  "name": "main-app",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "transitive-lib": "file:../transitive-lib"
    // lodash를 직접 선언하지 않음!
  }
}

{
  "name": "backend",
  "packageManager": "yarn@4.6.0",
  "devDependencies": {
    "ts-node": "^10.9.2"
  },
  "scripts": {
    "dev": "nodemon ./src/index.ts --exec ts-node"
  }
}