React-spring IE11 지원되지 않는 이슈 수정

저희 project에서 react-spring 을 animation 관련기능에서 활용하고 있었습니다.

https://react-spring.dev/

react-spring

최근 project에서 사용하는 node/typescript/webpack 등 package 버전을 올리면서 react-spring도 최신버전으로 upgrade하였습니다.

upgrade 이후 project가 IE11에서 동작하지 않는것이 확인되었고 하기 위치에서 arrow function이 있는것을 볼수 있었습니다.

해당 코드를 확인해보니 react-spring 코드였고 google에서 IE11에서 동작하지 않는다는 이슈를 찾아볼 수 있었습니다.

https://github.com/pmndrs/react-spring/issues/552

또한 react-spring 홈페이지에서 하기와 같은 내용이 있음을 확인하였습니다.

https://react-spring.dev/#browser-support

The library comes as an es-module compiled for evergreen browsers with 
the following browserlist config: >1%, not dead, not ie 11, not op_mini all. 
If you need to support legacy targets or deal with targets that don't support modules, 
you can use the commonJS export by simply appending .cjs to your imports.

하기와 같이 .cjs 추가해봤는데 모듈을 찾을수 없다는 이슈만 나타났습니다(뭔가 제가 잘못한것일 수 있습니다. ㅠㅠ).

import { animated, useTransition } from '@react-spring/web.cjs'

const { animated, useTransition } = require('@react-spring/web.cjs')

 

 

계속 안되서 결국 저희도 하기 discussion에서처럼 react-spring을 빌드하는 방법을 택했습니다.

https://github.com/pmndrs/react-spring/discussions/1451

저희 project는 typescript로 되어 있어서 ts-loader로 ts 파일만 webpack에서 빌드하고 있었습니다. 때문에 하기와 같이 babel-loader로 react-spring만을 빌드하기 위한 rule를 추가하였습니다.

const getReactSpringLoader = () => ({
  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        ],
        include: /node_modules(?=\/(@react-spring|rafz))/,
      },
    ],
  },
})

export { getReactSpringLoader }

@babel/preset-env를 빌드에서 사용하였습니다. 처음에는 필요한 babel plugin(https://babeljs.io/docs/en/plugins-list)만 추가하려고 했는데 하다보니 어느새 10개 이상 plugin을 추가한것을 발견하였습니다. 그래서 그냥 @babel/preset-env를 사용하였습니다.