타입스크립트에서 ES6방식으로 모듈 사용 시..ts2691

ts2691

이전 프로젝트에서는 Node에서 모듈을 불러오고 내보낼 때

CommonJS 방식으로 했다. (  module.export / requier )

 

새로운 프로젝트에선 ES6 방식으로 모듈을 사용하려는데 오류를 만났다.

 

상황은 mysql 연결코드가 들어가있는 파일을 따로 모듈화하여 쓰려고했는데

아래의 각각 코드로 내보내고 불러와도 모듈을 찾을 수 없다는 말뿐이었다.

 

export default db;

import db from "./db";

 

export const db;

improt {db} from "./db"

 

CustomError: Cannot find module 'C:\server\db' imported from C:\server\router\register_router.tsx

 

오류 문구를 보다보니 파일이름이 확장자없이 db로 딱 잘라끝나는게 문제일수도 있겠다 싶어서

import db from "./db.tsx"; 로 작성해보니 ts(2691) 오류가 떴다.

 

 

 

https://bobbyhadz.com/blog/typescript-import-path-cannot-end-with-ts-extension

 

 

해결 방법

원인은 TS와 esLint에 있었다.

 

 

1. import 시 경로를 db.js라고 명시해주기

improt {db} from "./db.js"

 

2. webpack.config.js 의 extensions 코드 변경

 

CRA에서 파일을 수정하려면 npm run eject를 먼저 해주어야했다.

https://berkbach.com/create-react-app-%EC%9D%98-webpack-config-js-%EB%93%A4%EC%97%AC%EB%8B%A4%EB%B3%B4%EA%B8%B0-78e40bf37313

Create-React-App 의 webpack.config.js 들여다보기

그 후 코드를 변경해주자

module.exports = {
  //... rest
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

 

 

 

3. eslint 룰 무시하기

 

import 시 주석으로 룰 무시

/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import { db } from './db.ts';

or

 

.eslintrc 설정파일 작성

{
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off"
  },
}