Reactで書かれたコードをグーグルクローラに読み込ませる[その3]
結論
解決しました!ぜひ最後までお読みください。
これの続き
saegusa41010.hatenablog.jp
謎のエラー
webアプリを公開、サーチコンソールに登録後、url検査にて作成したページをライブテスト。そうしたらエラーが発生。
エラー内容を探してみると
Uncaught SyntaxError: Unexpected token => https://www.twi-reviews.jp/packs/hello_react-bc8882257be880b4f845.js:1
エラー内容を特定したい
今のままでは、デプロイしてurlをライブテストして、、、という作業で、原因がよくわからない
そこでlocalで確認できるようにしようと思い立つ
Googleのbotは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となるツイートを集計、分析したサイトです。