문제상황
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파일에 입력해주면된다.