Reactで書かれたコードをグーグルクローラに読み込ませる[その3]

結論
解決しました!ぜひ最後までお読みください。
これの続き
saegusa41010.hatenablog.jp

謎のエラー

webアプリを公開、サーチコンソールに登録後、url検査にて作成したページをライブテスト。そうしたらエラーが発生。
エラー内容を探してみると

Uncaught SyntaxError: Unexpected token =>
https://www.twi-reviews.jp/packs/hello_react-bc8882257be880b4f845.js:1

エラー内容を特定したい

今のままでは、デプロイしてurlをライブテストして、、、という作業で、原因がよくわからない
そこでlocalで確認できるようにしようと思い立つ
GooglebotはChrome41を使用しているらしい、なのでChromeの41をここからダウンロード Google Chrome 旧バージョン - Mac
そしてエラー内容をみてみると、なんとアロー関数はnode_modules内で書かれていました。
ということは、babelがなんらかの原因でnode_modules内では効いていないので、設定を変更すれば解決しそうです。

解決方法

config/webpack/custom.jsを新たに作成し、以下を記述

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: {
                include: /node_modules/,
                // node_modulesの中のモジュールを除外対象とする。
                exclude: [/node_modules\/query-string\//, /node_modules\/strict-uri-encode\//]
                // パッケージのモジュールを除外対象から除外する。今回はこの二つのmoduleがエラーを起こしていた。
            },
            use: 'babel-loader',
        }, ],
    }

}

そして、config/webpack/environmentsを以下のように編集

const {
    environment
} = require('@rails/webpacker')
require("@babel/polyfill");
const customConfig = require('./custom')
const babel = environment.loaders.get('babel')
const babelLoader = babel.use.find(loader => loader.loader === 'babel-loader')
babelLoader.options.presets = [
    [
        "env",
        {
            "useBuiltIns": true
        }
    ],
    "react"
]
environment.config.merge(customConfig)
module.exports = environment

この書き方は
webpack: Configuration | webpack
rails: webpacker/webpack.md at master · rails/webpacker · GitHub
を参考にしました。

最後に

辛かった、、、クローラbotのバージョン早く上がって欲しいですね。 https://www.twi-reviews.jp/
ぜひこのサイトも訪れてみてね、ゲームのreviewとなるツイートを集計、分析したサイトです。