React Webpack, core-js에러 해결

원래 이렇게 corejs 관련 설정을 했다.

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 2%, not dead',
        corejs: 3,
        useBuiltIns: 'usage',
        modules: false,
        shippedProposals: true
      }
    ],
    '@babel/preset-react'
  ]
};

그러자 이런 에러가 나며 잘 되지 않았다.
export 'default' (imported as 'React') was not found in 'react'

그래서 원래 하던대로

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

해주니깐 에러가 나지 않았다. 그런데 이렇게 하니 async await를 실행시켰을 때 regeneratorruntime is not defined 에러가 나면서 되지 않았다. babel이 es5 문법으로 바꿔주면서 async await가 먹히지 않는 것이다. 그래서 core-js를 적용 시키려고 다시 찾아보았다. 결론은

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 2%, not dead',
        corejs: 3,
        useBuiltIns: 'entry',
        modules: false,
        shippedProposals: true
      }
    ],
    '@babel/preset-react'
  ]
};

이렇게 하여 useBuiltIns 옵션을 바꿔주었다. 그러니깐 잘 되었다.

'entry' 옵션은 브라우저에서 필요한 옵션만 import 하게 해주는 것이고, 'usaage'는 코드상에서 사용되는 폴리필만 import 하는 것이라고 한다.

답변
Babel can only find used methods in files it transpiles. If you need some polyfills for files Babel doesn't even see (e.g. if you are not transpiling node_modules), you'll need to manually include them (or use useBuiltIns: entry).

node_modules는 transpiling 하지 않기 때문에 나타나는 에러인 것 같다.