[Babel, Webpack] possible exports: __esModule

webpack + babel-loader 를 사용하던 중, 위와같은 에러메세지 발생

 

해결

.babelrc 에 preset-env 옵션으로 "modules" : "cjs" 추가

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "modules": "cjs",
        "corejs": { "version": 3, "proposals": true }
      }
    ],
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

- cjs 는 commonjs 와 같은 것으로, 바벨이 ES Module 코드를 CommonJS 모듈의 문법으로 변환하여 두 모듈을 같이 사용할 수 있도록 함.

- 바벨은 _interopRequireDefault 라는 함수를 통해서 이와 같은 로직을 수행

- 플러그인으로 @babel/plugin-transform-modules-commonjs 를 지원하며, preset-env 사용시 "modules" : "cjs" 옵션을 주면 플러그인이 추가됨