Module not found: Error: Can’t resolve ‘./keyboard’ in ‘..\Desktop\tetris\src’

M

문제상황

keyboard.ts파일에 Keyboard class를 만들고, export했다. main.ts파일에서 keyboard.ts파일을 import했는데 다음과 같은 에러가 나왔다.

Module not found: Error: Can't resolve './keyboard' in 'C:\Users\W24946\Desktop\tetris\src'

내 코드

keyboard.ts

class Keyboard {
  .....
}
export default Keyboard

main.ts

import './style.css';
import Keyboard from './keyboard';
const a = new Keyboard();

해결방안 찾기

webpack.config.js 파일에 문제가?

webpack에서 import할때 확장자명을 안붙이는데, 기본적으로 확장자가 js파일이라고 인식하는것같다. 그래서 javascript로만 프로젝트를 진행할때는 문제가 없는데, typescript를 쓰면 문제가 발생한다. 확장자명이 ts파일이라서 해당 파일을 못찾기 때문이다.

그래서, webpack.config.js 파일의 resolve부분에 extensions를 직접 지정해줘야한다.

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.js', '.json']
  }
};

문제가 해결되었다!

Add Comment