[webpack] Module parse failed 오류

[miniposi]

🚨 에러

npx webpack으로 실행시에 additional loader를 필요로 하는 error

ERROR in ./src/app/page.tsx 2:11
Module parse failed: Unexpected token (2:11)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
| function Home() {
>     return <main>home</main>;
| }
| export default Home;

webpack 5.89.0 compiled with 1 error

[miniposi]

구글링할 시간에 에러 메세지를 잘 읽자.. 💢

해결 방법

ts-loader로는 해결하지 못하기 때문에 발생하는 에러입니다.
babel-loader를 설치하여 해결하였습니다.

1. 설치

   npm install @babel/preset-react --save-dev   
   npm install @babel/preset-typescript --save-dev
   

2. babel.config.js 설정

   module.exports = {
     presets: ['@babel/preset-react', '@babel/preset-typescript'],
   };