Yuri’s Tech Note

技術系アウトプット

webpackのコンパイルでnode_modules配下のPropTypesを解決する

状況

既にたくさんのライブラリを使っているReact NativeのプロジェクトにReact Native for Webを組み込んでWebpackの設定をしていた際にprop-typesを使っているモジュールの解決ができずwebpackのコンパイルがこけた。

自分たちの書いているJsのコードで使用されているPropTypesは解決できているのでnode_modules配下だけ解決できていなかった。

PropTypesの排除

PropTypesについてはwebpackでコンパイルする前にbabelの方でprop-typesを取り除くという作業が必要になり、具体的にはbabel-plugin-transform-react-remove-prop-typesというプラグインを使う必要がある。

@.babelrc
{
  "plugins": [
    ["babel-plugin-transform-react-remove-prop-types", { "mode": "remove" }],  // <- Add
  ],

modeについては remove / wrap / unsafe-wrap の3つがある。
詳しくは下記で紹介されているがデフォルトはremove。
GitHub: babel-plugin-transform-react-remove-prop-types

原因の推測

これがnode_modules配下のみ効いていないということなのだから怪しいのはwebpackのloaderの設定の箇所だと絞り込める。

@webpack.config.dev.js 修正前
modules: {
    {
        test: /\.(js|jsx|mjs)$/,
        include: [paths.appSrc],
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
            presets: ['react-native'],
            plugins: ['react-native-web'],
            cacheDirectory: true,
            babelrc: true,
        },
    },
}

上記だとnode_modulesをbabel-loaderの対象外としている。
そこでPropTypesを使用しているnode_modules配下のライブラリを直接指定してbabel-loaderの対象としたい。

解決方法

これを解決するためには2つの手順が必要だった。

  • paths.jsに対象のライブラリを追加
@paths.js
module.exports = {
    appRNNodeModules: resolveApp('node_modules/react-native-material-design'),
    appRNNodeModules2: resolveApp('node_modules/react-native-vector-icons'),
}
  • includeにpathsに追加した名前を追加
include: [paths.appSrc, paths.appRNNodeModules, paths.appRNNodeModules2],

つまづいたのはここの記述方法

調査の最中そこかしこで下記のような記述をみかけた。
exclude: /node_modules/,

「node_modulesだけはwebpackがコンパイル後もきっとわかるということなのだろう」と思いここで
include: [paths.appSrc, /node_modules/react-native-material-design],

のように記述していたがこれが動かなかった。

公式ドキュメントを見ても詳しく記述方法に注釈がなかったので(もしかしたら最初から読めばお作法として書かれていたのかもしれない)ずっとはまっていた。

もしここについて詳しい方がいたら、また記事の内容に間違いがあれば気軽にコメントお願いします。
まさかり歓迎という言葉が好きではないので、バッテリー募集(投げてくれたらしっかり受けめるよ)と言っておきます⚾️

最後に

これについて、react nativeではPropTyepsはなくす方向なのに未だにPropTypesを使っているような活発でないreact-native-material-designは使うべきではないのではという話になった。
その際下記のnpmモジュールの利用率を調べることができる便利なサービスを見つけた。

www.npmtrends.com