snowpack에 React jsx 17 runtime 적용하기 - trustyoo86/react-snowpack-example GitHub Wiki

1. @babel/core, @babel/preset-react update

yarn upgrade @babel/core @babel/preset-react

2. preset-react내 runtime: automatic 필드 적용

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    [
      '@babel/preset-react',
      {
        'runtime': 'automatic',
      },
    ],
  ],
  plugins: [],
};

3. 중요!! @snowpack/plugin-babel 설치 및 세팅

// snowpack.config.js
plugins: [
    /**
     * snowpack plugins
     */
    '@snowpack/plugin-babel', // important!
  ],
  install: [
    /* ... */
    'react/jsx-runtime', // important! <-- 브라우저에서 dependency 설치시에 선 install 해주어야 함
  ],

4. react 프로젝트에서 안쓰는 import 지우기

react-codemods 이용

npx react-codemods update-react-imports
# 만약 업데이트 되는 파일이 있다면 git stash 혹은 commit을 해주거나,
npx react-codemods update-react-imports --force