신규 프론트 프로젝트(React + Typescript) 설정 시 /one-path/two-path와 같은 2 depth 이상의 경로를 지정할 때
아래와 같은 에러가 노출되며 아무런 페이지도 렌더링 되지 않는 문제가 발생했습니다.
Uncaught SyntaxError: Unexpected token <
원인
Webpack 사용 시 위와 같은 에러가 노출되는 케이스는 아주 많지만, 이번 경우는 설정에 publicPath가 잡혀있지 않아서 생기는 문제였던 것 같습니다.
해결
webpack.config.js 파일에 publicPath 설정을 추가했습니다.
module.exports = {
context: sourcePath,
entry: {
app: './main.tsx'
},
output: {
path: outPath,
filename: isProduction ? '[contenthash].js' : '[hash].js',
chunkFilename: isProduction ? '[name].[contenthash].js' : '[name].[hash].js',
publicPath: '/'
}