컴포넌트 파일에는 문제가 없는데 모듈을 계속 못찾는 에러가 발생했다.
검색을 해보니, typescript를 사용할 때에는 webpack 설정을 수정해줘야된다는 글을 읽게되었다.
webpack은 import구문에 확장자를 지정해주지 않으면,
resolve.extensions의 기본 확장자인 ['.js', '.json', '.wasm'] 배열내에서 찾고, 없으면 module을 찾지 못한다.
typescript는 .tsx 파일이 확장자이기 때문에 해당 확장자를 추가해주면 webpack이 module을 찾을 수 있다.
그러키 때문에 가장 상위 폴더에 두 파일을 추가해주면 된다.
- 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
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" },
],
},
};
- 참고
https://velog.io/@yes3427/Webpack-Module-not-found-error
[Webpack] Module not found 에러
웹팩 설정을 하면서 엄청난 에러를 만났다. 간단한 설정인데 당황스러웠다. 구글링을 해보니 모듈 설치 과정에서 문제가 발생한 것 같아고 package-lock.json과 node_modules를 지우고 다시 npm i 를 하면
velog.io
[React] Module not found: Error: Can't resolve .. In .. 오류 (TypeScript React)
리액트 프로젝트를 생성하고 빌드하던 도중 Module not found: Error: Can't resolve .. In .. 이라는 오류가 떴다, react-router-dom 을 사용하면서 경로를 못찾는 것 같았는데 해당 내용으로 검색을하니 node_module
victory-ju.tistory.com