react native v0.49で無効になったdynamic importについて

2017.10.3にリリースされた、react-native v0.49の割と大きいbreaking change

Transformerror:... "require() must have a single string literal argument" 

• この Transformerrorはα版で出るようになった
• が、結局リリース版出ても出続けることがわかったので、調べた

Transformerrorの原因

// こういうのが、通らなくなった。静的解析時にstringでないとNG
require('moment/locale/' + name);

• moment.js
  • PRでてるv2.19.0がリリースされた
    • https://github.com/moment/moment/releases/tag/2.19.0
• realm.js
  • パッチが出たのでいまはok
• などなど
  • 使ってるモジュールで使われてるとNG

dynamic importのサポートが（いったん）終了した

• react-nativeのbundlerである、metro-bundlerがdynamic importのサポートを切った
• 影響範囲大きいが、計画的なものっぽいので、ケアされることはなさそう

metro-bundlerのdynamic import自体は、そのうち復活する

• ただし、stage-3のimport()シンタックスのサポートとともに復活する
• webpack2とかでサポートされてるやつ
  • https://github.com/tc39/proposal-dynamic-import
• react-native/metro-bundlerに議論が拡散してるので、追いにくいが議論されてる
  • https://github.com/facebook/metro-bundler/issues/52
  • https://github.com/facebook/react-native/issues/6391#issuecomment-329048372
• いつ頃になるのかは、metro-bundlerのロードマップが出てないので、不明

workaround

projectのdependencies

• 汎用的な方法はない。
• 自分が使ってるモジュールがTransformerrorを吐いているなら、パッチを当てたforkを指定するか、そのフォークを手元にforkするとか指定する他ない

- "moment": "latest",
+ "moment": "git+ssh://[email protected]/tqc/moment.git#no-dynamic-import"

• 2017.10.12時点で、moment.jsはupdate済みなのでこれは実際には不要

dependenciesのdependencies

少し面倒なケース。yarnを使ってると苦労は軽減可能

• 使用してるnpm pkgの依存pkgがdynamic importを使ってるケース
• 例:react-native-gifted-chat
  • package.jsonで"moment": "2.18.1"と固定していた
    • Transformerrorを吐くversionが指定された
    • 数日前にfixされたので
• yarnだとSelective dependency resolutionsを使うことで解決

//package.jsonに追記したら、通常通り。yarn install, yarn.lock生成, etc..
"resolutions": {
    "react-native-gifted-chat/moment": "latest"
}

• c.f. yarnのselective dependency resolutions機能 - Qiita