프로젝트 진행중 발생한 모듈 불러오기 오류

안녕하세요 프로젝트를 진행하다 모듈 불러오기 관련 오류가 발생하여 질문 남겨봅니다.

문제상황

> 모듈 불러오기중 not found react + typescript + yarn berry를 사용했고 zero install과 pnp를 사용해 모듈들을 캐싱했습니다. 이 과정에서 모듈들을 import 할때아래와 같은 오류가 발생합니다.

예시

// main.tsx

import * as ReactDOM from "react-dom/client"; // Cannot find module 'react-dom/client' or its corresponding type declarations

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; // Cannot find module '@tanstack/react-query' or its corresponding type declarations.

import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // Cannot find module '@tanstack/react-query-devtools' or its corresponding type declarations.

import { BrowserRouter } from "react-router-dom"; // Cannot find module 'react-router-dom' or its corresponding type declarations

import App from "./App";

import { GlobalStyle } from "./themes/globalStyle";

const queryClient = new QueryClient({

  defaultOptions: {

    queries: {

      refetchOnWindowFocus: true,

      refetchOnMount: true,

      staleTime: 60_000,

      retry: 2,

    },

  },

});

ReactDOM.createRoot(document.getElementById("root")!).render(

  <QueryClientProvider client={queryClient}> // Cannot find module 'react/jsx-runtime' or its corresponding type declarations.

    <BrowserRouter>

      <ReactQueryDevtools />

      <App />

      <GlobalStyle />

    </BrowserRouter>

  </QueryClientProvider>

);

기대효과

> 모든 모듈들이 정상적으로 불러와짐

참고자료

// package.json
{
  "name": "fe",

  "private": true,

  "version": "0.0.0",

  "type": "module",

  "scripts": {

    "dev": "vite",

    "build": "tsc -b && vite build",

    "lint": "eslint .",

    "preview": "vite preview"

  },

  "dependencies": {

    "@emotion/react": "^11.13.3",

    "@emotion/styled": "^11.13.0",

    "@tanstack/react-query": "^5.59.0",

    "@types/react-router-dom": "^5.3.3",

    "react": "^18.3.1",

    "react-dom": "^18.3.1",

    "react-router-dom": "^6.26.2",

    "styled-components": "^6.1.13",

    "zustand": "^5.0.0-rc.2"

  },

  "devDependencies": {

    "@eslint/js": "^9.11.1",

    "@tanstack/react-query-devtools": "^5.59.0",

    "@types/node": "^22.7.4",

    "@types/react": "^18.3.10",

    "@types/react-dom": "^18.3.0",

    "@types/styled-components": "^5.1.34",

    "@vitejs/plugin-react-swc": "^3.5.0",

    "eslint": "^9.11.1",

    "eslint-plugin-react-hooks": "^5.1.0-rc.0",

    "eslint-plugin-react-refresh": "^0.4.12",

    "globals": "^15.9.0",

    "typescript": "^5.6.2",

    "typescript-eslint": "^8.7.0",

    "vite": "^5.4.8"

  },

  "packageManager": "yarn@4.5.0"

}

// tsconfig.json
{

  "compilerOptions": {

    "target": "ES2020",

    "useDefineForClassFields": true,

    "lib": ["ES2020", "DOM", "DOM.Iterable"],

    "module": "ESNext",

    "skipLibCheck": true,

    /* Bundler mode */

    "moduleResolution": "node",

    "allowImportingTsExtensions": true,

    "allowSyntheticDefaultImports": true,

    "resolveJsonModule": true,

    "isolatedModules": true,

    "esModuleInterop": true,

    "jsx": "react-jsx",

    "noEmit": true,

    /* Linting */

    "strict": true,

    "noUnusedLocals": true,

    "noUnusedParameters": true,

    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".",

    "paths": {

      "@/*": ["./src/*"]

    }

  },

  "include": ["src", "**/*.ts", "**/*.tsx"]

}

타입스크립트 버전 : 5.6.2

vsc 버전 : September 2024 (version 1.94)

시도한 것

> vsc 재시작, 재설치