인프런 커뮤니티 질문&답변
작성한 질문수
화면에 렌더링은 되는데 코드에서 빨간줄이 떠요
해결된 질문
작성
·
231
0
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": { "@components/*": ["src/components/*"] }
},
"types": ["node"]
}import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import ShowRoom from "@components/three/ShowRoom";
export default function Home() {
return (
<>
<Canvas>
<axesHelper args={[5]} />
<gridHelper />
<OrbitControls />
<directionalLight position={[3, 3, 3]} />
<ShowRoom />
</Canvas>
</>
);
}//vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{
find: "@src",
replacement: path.resolve(__dirname, "src"),
},
{
find: "@components",
replacement: path.resolve(__dirname, "src/components"),
},
],
},
});vite config, tsconfig.json을 바꿨는데 home.tsx에서 import ShowRoom from "@components/three/ShowRoom"; 불러오는데 Cannot find module '@components/three/ShowRoom' or its corresponding type declarations.ts(2307)
못찾는다는 에러가 생깁니다
뭐를 잘못했는지 모르겠습니다ㅠㅠㅠ
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. kiseon Han님.
TypeScript와 Vite 프로젝트에서 실제로 존재하는 파일을 제대로 찾지 못하는 문제는 경로 별칭(alias) 설정의 문제로 인해 발생할 수 있습니다. 여기서 발생한 문제를 해결하기 위해 몇 가지 점검 사항을 안내해 드리겠습니다.
1. tsconfig.json 설정 점검
tsconfig.json 파일에서 paths 속성이 올바르게 설정되어 있는지 확인하세요. 현재 설정이 보기는 다음과 같습니다:
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "@components/*": ["src/components/*"] }
}
}
이 설정은 코드를 올바르게 참조할 수 있도록 baseUrl이 프로젝트 루트로 설정되어야 하며, paths로 정의된 각 경로가 실제 파일 및 폴더 구조와 일치해야 합니다.
2. Vite의 alias 설정
vite.config.ts 파일의 resolve.alias 부분이 올바르게 설정되어 있는지 확인하세요:
resolve: {
alias: [
{
find: "@components",
replacement: path.resolve(__dirname, "src/components"),
}
]
}
이 설정이 tsconfig의 paths와 동일하게 되어 있는지 확인하고, 실제 파일 경로와 동일한 위치를 가리키는지 확인하세요.
3. 파일 구조 재확인
위의 이미지에 따르면, ShowRoom.tsx 파일은 src/components/three 폴더에 위치해 있습니다. import ShowRoom from "@components/three/ShowRoom"; 경로와 일치하는지 다시 한 번 확인해 보세요.
4. TypeScript 설정 관련 문제
TypeScript가 모듈을 못 찾는 상황에서는, 프로젝트의 tsconfig 또는 vite 설정이 캐시되면서 제대로 반영되지 않을 수 있습니다. 이는 필수적인 설정이 누락되거나, include 및 exclude 섹션이 잘못 설정된 경우에도 발생할 수 있습니다.
해당 문제가 해결되지 않는다면, 아래의 기존 게시물을 통해 자세한 해결책을 찾아볼 수 있습니다:
이 방법들이 도움이 되기 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
0
tsconfig.app.json 부분에 추가로 작성해주니깐 에러가 해결되었습니다! 혹시 tsconfig.json에서 작성할때는 안됐던 이유를 여쭤봐도 괜찮을까요!
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@src/*": ["src/*"]
}
},
"include": ["src"]
}
안녕하세요. 코딩의세계 한태재입니다.
일단 (질문해주신 내용의 해결과는 상관없지만)
맨처음 작성하셨던 tsconfig 파일을 보면
"types": ["node"] 가 compilerOptions 밖에 있네요.
compilerOptions 안으로 넣어주셔야 할것 같아요.
그것과는 별개로, 질문해주신 빨간색 글자가 나는 에러는
compilerOptions에 "jsx": "react-jsx" 를 넣어주셔야 해결이 됩니다.
react의 jsx문법을 사용하겠다는 옵션이고요, tsx역시 jsx문법을 사용하기때문에
.ts, .js 파일이 아닌 .tsx, .jsx파일을 사용하시려면 해당 옵션을 넣어주셔야 합니다.
잘 넣어주셔서 해결하신것 같네요 ㅎㅎ
다른 질문있으시면 알려주세요 감사합니다!