- Today
- Total
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- react toast
- 사회복무요원 훈련소
- The above error occurred in the
- 리액트
- sessionStorage
- localStorage
- query param
- next.js toast
- angular
- 공익 훈련소
- 비동기 병렬처리
- 리액트 라이프사이클
- server action
- svgr
- resolved to branch.
- 리액트 알림
- 훈련소
- no-use-before-define
- useformstatus
- react life sycle
- 오라클클라우드
- NextJS
- styled-component
- 자바스크립트 순수함수
- 훈련소 후기
- 산업기능요원 훈련소
- react
- useRouter
- 자바스크립트
- 오블완
아 그거 뭐였지
[React] Module not found: Error: Can't resolve .. In .. 오류 (TypeScript React,Next) 본문
[React] Module not found: Error: Can't resolve .. In .. 오류 (TypeScript React,Next)
승발자 2022. 6. 25. 01:03
++++ 2023/02/02 추가 내용
++++ NextJS사용도중 Module not found React 오류에는 npm run build 명령어로 빌드후에 실행하면된다.
++++ 처음 실행할때만 한번 해주면 된다. 그외는 밑에 내용 참고
------------------------------------------------------------------------------------------------------------------
리액트 프로젝트를 생성하고 빌드하던 도중 Module not found: Error: Can't resolve .. In .. 이라는 오류가 떴다,
react-router-dom 을 사용하면서 경로를 못찾는 것 같았는데 해당 내용으로 검색을하니
node_module과 package-lock.json을 삭제하고 npm install을 하면 된다는 내용밖에없었다.
해당 방법으로는 해결이 안됐다.
프로젝트를 아예 삭제하고 재설치를 몇번을해도 해결이 되지않아서 다른 방법을 찾아보던중
밑에 방법으로 해결을 하게되어 해결방법을 올려본다.
node_module 폴더를 삭제하는 방법으로는 해결이 되지않는 고집불통 리액트 프로젝트가 있다면 이 방법을 한번 써봐라
본인은 TypeScriptReact를 사용한것을 참고하길바란다.
해당 파일들이 없다면 자신의 프로젝트 제일 상단의 위치에서 폴더에서 파일을 만들어주면 된다.
create-react-app client를 했을때의 예시
ex) client
-node_module
-public
-src
tsconfig.json
webpack.config.js
- tsconfig.json 파일을 수정해준다.
//tsconfig.json 파일
{
"compilerOptions": {
"jsx": "react",
"lib": ["es6", "dom"],
"rootDir": "src",
"module": "commonjs",
"esModuleInterop": true,
"target": "es5",
"sourceMap": true,
"moduleResolution": "node",
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
},
"include": [
"./src"
],
"exclude": [
"node_modules",
"build"
]
}
- webpack.config.js 파일의 resolve를 수정해준다.
//webpack.config.js 파일
module.exports = {
entry: {
dev: "./src/index.tsx",
},
output: {
filename: "./build/index.js",
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
},
module: {
loaders: [
// Typescript
{ test: /\.tsx?$/, loader: "ts-loader" },
],
},
};
- npm run start를하고 정상적으로 컴파일되는 리액트를보며 흐뭇해한다.
'Front-End' 카테고리의 다른 글
[React] Styled-Component 사용해보기 (Props로 재사용 컴포넌트 만들기) (0) | 2022.06.27 |
---|---|
[React] 리액트 중첩 라우팅 하기 (BrowserRouter) (0) | 2022.06.26 |
[Angular] Angular에서 soket.io 사용하기 (0) | 2022.05.18 |
[Angular] ngFor, 반복적인 HTML (feat. 배열 데이터 출력) (0) | 2022.04.13 |
[React] useEffect 항상, 한번만, 변경될때 사용법 (0) | 2022.04.08 |