typescript+react+webpack+babel 설정 때 본 오류^^....

계속 cra쓰다가 너무 의존하면 안될 것 같아서 해봤는데 후 역시 첫시작은 항상 순조롭지 않지. 

근데 그냥 다른것 보단 webpack사이트 보는게 젤 빠를듯

 

1.바벨 설정

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
};

타스를 쓰지 않는 리액트 +웹팩 설정만 봐서 그런지 앞에 두개만 깔고 presents에 넣었는데  '@babel/preset-typescript' 필요

 

2.tsconfig 설정

tsconfig설정은 인터넷에 나와있는거보다 웹팩 홈페이지에 나와있는 설정이 최고다. 당연히 웹팩 설정도 그러하다!!!1

https://webpack.kr/guides/typescript/#basic-setup

TypeScript | 웹팩

3. 웹팩 설정!

하 웹팩 사이트 들어가기전에 사람들이 올린글을 주워모아서 만들었는데 되지않았다. ts-loader도 깔고 그랬는데, loader에 ts-loader와 babel-loader를 둘 다 넣었더니, 두번 컴파일 하지 말라 그래서 ts-loader만 넣었더니 또 jsx 문법이 읽히지 않는 오류가 발생했다.

공식 홈페이지에 나와있는 내용
이미 babel-loader를 사용하여 코드를 트랜스파일 하는 경우라면 
@babel/preset-typescript를 사용하여 Babel이 추가 로더를 사용하는 대신 JavaScript와 TypeScript 파일을 모두 처리하도록 합니다. ts-loader와 달리, 기본 @babel/plugin-transform-typescript 플러그인은 어떠한 타입 검사도 수행하지 않습니다

 

또 `TypeScript emitted no output for` 이런 에러가 발생해서 얜또 뭐야 싶었는데 exclude: /node_modules/ 이걸 반드시 설정해줘야한다.

 

4.React is not defined

웹팩 공식문서와  스택오버플로우로 검색해보면서 겨우겨우 빌드에 성공을 했다. 하지만 화면은 텅 비어있고...콘솔창에 가보니 React is not defined라는 오류가 날 향해 인사하고있었다...

검색을 해보니, 아까 웹팩 모듈의 옵션의 presets 부분에서

 '@babel/preset-react',
                {
                  runtime: 'automatic',
                },

이 값을 설정하면 된다고 하길래 해봤더니 안됐다. 아니 external에 분명 React:'react'를 이미 적어놨는데... 왜 안될까 하면서 무한 검색 하다가 새로운 방법을 발견했다.

 

  plugins: [
    new webpack.ProvidePlugin({
      React: 'react',
      'react-dom': 'ReactDOM',
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

https://webpack.kr/plugins/provide-plugin/

ProvidePlugin | 웹팩

이걸 넣었더니 제대로 랜더링이 되는걸 확인할 수 있었다.