jsx를 읽을 수 없는 문제

---

1. 문제사항

다음 프로젝트 튜토리얼(글 작성 후 링크 필요) 진행 중 다음과 같은 오류 발생

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const Home = () => {
>     return <div>React Application</div>
| }
| 

---

2. 문제원인

• webpack.config.js module의 rule을 잘못 설정하였음

---

3. 해결방안

import * as path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  module: {
    rules: [
        {
          //test: /\.(js)$/,
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    static: './src'
  },
};

• module의 rules의 test부문이 js -> js|jsx 이어야 함

---

4. 비고

• 없음

---

5. 문제원인 파악을 위한 시행 착오

• 없음

---

6. 문제 해결을 위한 시행 착오

• 없음

---