Front-End

[React] Module not found: Error: Can't resolve .. In .. 오류 (TypeScript React,Next)

승발자 2022. 6. 25. 01:03
728x90
반응형

 

 

 

++++ 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를하고 정상적으로 컴파일되는 리액트를보며 흐뭇해한다.

 

728x90
반응형