[Webpack] Module not found 에러

웹팩 설정을 하면서 에러를 만났다. 6개나,,?
다 Module not found 인 것을 보니 webpack 설정에 문제가 있는 듯 하였다.

그렇게 3시간 삽질한 결과
내가 해결한 방법을 소개하겠다.

우선 webpack이 module을 찾는 방식을 먼저 알아봐야한다.

webpack이 module을 찾는 방법

webpack은 import App from "./App" 처럼 확장자를 명시하지 않으면
resolve.extensions 배열 내에서 확장자를 ㅐ입해서 찾아본다.
resolve.extensions 의 기본값은 ['.js', '.json', '.wasm']이다.
webpack은 App.js App.json App.wasm 순으로 찾아보고, 없으면 module이 없다고 판단, module not found 에러를 반환한다.

이를 우리는 resolve.extensions 를 사용하여 기본 배열을 재정의할 수 있는데,
이를 재정의해주면 기본 확장자를 사용하여 모듈을 해석하지 않는다.

나는 TypeScript를 쓰기 때문에
.tsx, .ts 를 추가해야한다.

module.exports = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts"],
  },
  //...
};

좋아 이제 돌아갈차례다!

뭐지 에러가 났다.

간단한 설정인데 당황스러웠다.
구글링을 해보니
모듈을 가져오는데 경로에 문제가 발생한 것이었다.
package-lock.json과 node_modules를 지우고 다시
npm i 를 하면 해결이 된다고 했는데,,

10번을 해도 해결이 안됐다.

해당 경로에 직접 찾아가서 파일을 찾아봤더니
확장자가 .js로 되어있었다.
resolve 옵션에 .ts와 .tsx 만 배열에 넣었더니 필요한 모듈을 가져오지 못해서 발생한 것이다.

문제는 위의 webpack이 모듈을 찾는 방법을 이해하면 간단히 해결된다.
나는 기본 배열을 재정의한 것이기 때문에
.ts, .tsx만 해석해서 기본 확장자의 모듈을 해석하지 못해서 발생한 것이다.
따라서 ... 를 이용하여 기본 확장자에 접근할 수 있도록 수정하면 해결된다.

수정한 webpack.config.js 파일이다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: process.env.NODE_ENV || "development",

  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts", "..."],
  },
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "/dist"),
  },
  devtool: "eval-source-map",
  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "ts-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
};

나는 단순하게 TypeScript를 사용할거니까!
.tsx, .ts만 설정하면 되겠지! 라고 간단하게 생각해서 발생한 문제였다.
이번 에러를 계기로 webpack의 resolve.extensions 와 webpack이 모듈을 불러오는 방식에 대해 정확하게 알 수 있었다.