Module not found: Error: Can’t resolve ‘object-assign’

문제상황

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const join = require('path').join;
module.exports = {
  entry: join(__dirname, '/src/index.tsx'),
  devtool: 'source-map',
  output: {
    filename: "main.js",
    path: join(__dirname, '/dist'),
  },
  module: {
    rules: [{
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "ts-loader"
      }
    },
    {
      test: /\.(scss)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, '/src/index.html')
    }),
    require('autoprefixer')
  ],
  resolve: {
    extensions: [".ts", ".tsx", "scss"]
  }
};

tsconfig.json

{
  "compilerOptions": {
    "target"                           : "es6"      , // ts -> es6 js코드로 변환한다.
    "module"                           : "commonjs" , // module을 import/export하는 방식은 commonjs방식을 따른다.
    "jsx"                              : "react"    , // jsx/tsx파일은 typescript가 처리한다. 고로, babel은 필요없다.
    "outDir"                           : "./dist"    , // typescript가 js로 코드 변환한 결과물은 dist폴더에 넣어놓는다.
    "rootDir"                          : "./src"    , // ts코드들은 src폴더에 있다.
    "strict"                           : true       , // any를 사용하지 않는다. 엄격하게 타입검사를 진행한다.
    "esModuleInterop"                  : true       , /** 우리는 es6의 모듈 방식인 import/export를 사용하는데, 가끔 어떤 라이브러리들은 require와 같은 commonjs방식을 사용한다.
                                                       이때 require대신에 import를 써도 에러가 안나게끔 처리한다. */
    "skipLibCheck"                     : true       , // 모든 선언 파일(*.d.ts)의 타입을 검사합니다
    "forceConsistentCasingInFileNames" : true         // myComponent.ts와 MyCompoenet.ts를 다른 파일로 간주한다
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}

위와 같은 환경에서 webpack으로 build를 하려고 하니 다음과 같은 에러메세지가 나왔습니다.

ERROR in ./node_modules/react-dom/cjs/react-dom.production.min.js 12:39-63
Module not found: Error: Can't resolve 'object-assign' in '/workspace/react-hook-tetris/node_modules/react-dom/cjs'
 @ ./node_modules/react-dom/index.js 35:2-63
 @ ./src/index.tsx 7:36-56
ERROR in ./node_modules/react/cjs/react.production.min.js 9:19-43
Module not found: Error: Can't resolve 'object-assign' in '/workspace/react-hook-tetris/node_modules/react/cjs'
 @ ./node_modules/react/index.js 4:2-59
 @ ./src/index.tsx 6:32-48

갑자기 react/cjs 파일의 object-assign에 뭐가 문제라도…?

해결

구글링을 해서 한번에 해결했습니다.

웹팩이 제 코드뿐만이 아니라 제가 사용한 라이브러리도 하나로 묶어주기 때문에 ts, tsx파일 뿐만이 아니라 js파일도 resolve항목에 추가시켜줘야했습니다.

resolve: {
  extensions: [".ts", ".tsx", ".js", ".jsx", "scss"]
}

위 코드를 webpack.config.js파일에 입력해주니 해결되었습니다.