babel plugin을 적용해도 dynamic import syntax를 읽을 수 없는 경우

[SoYoung210]

♻️ Env

• webpack: 4.35.2
• html-webpack-pug-plugin: 2.0.0
• webpack-bundle-analyzer: 3.3.2

Desc

{
  "presets": [
    "@babel/typescript",
    "@babel/react",
    ["@babel/env", {
      "targets": {
        "node": 6
      }
    }]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

이렇게, dynamic import를 위한 babel설정을 잡아주었음에도, syntax error가 나는 경우가 있다. 이는, 패키지(특히 웹팩)를 npm으로 설치했을 때 peer dependency인 acorn을 참조하는 방식에서의 오류이므로 Ref에 적혀있는 방식으로 이슈를 해결하거나, 패키지 매니저로 yarn을 선택하면 해결된다..

Ref

https://github.com/webpack/webpack/issues/8656#issuecomment-456010969

[eastroots92]

요거 보시면 좋을 것 같습니다. https://github.com/webpack/webpack/releases/tag/v4.35.3

[SoYoung210]

@eastroots92 감사합니다! comment 를 참고했더니 이 부분에 대한 bug fix가 4.35.3 버전에서 있음을 확인했습니다.

현재 4.41.2(현재기준 최신) 버전을 npm으로 설치했고 정상동작합니다! 👍