Webpackのリロード

概要

・Webpackに誤った公開鍵、秘密鍵が保存されてしまった。（ブラウザでいうキャッシュみたいな状態？）

・./bin/webpackでリロードして解決。

経緯

PAY.JPでのクレジットカード決済機能実装のため、公開鍵と秘密鍵を環境変数に入力。誤って全角文字を入れてしまい、ブラウザのコンソールから

Uncaught Error: Can't base64 encode non-ASCII characters.

とのエラー文が表示。環境変数の入力ミスであることに気付き、再度入力。これで行けるかと思いましたが、結果変わらず。おかしいと思い、PAYJP_PUBLIC_KEYとしてトークン生成時に渡している変数をconsole.logしてみると、入力ミスのままの文字列になっていました。

ソースコード

# トークン生成の公開鍵設定

const pay = () => {

Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);

  以下略

# RailsからWebpackerへ環境変数を渡す

Webpacker::Compiler.env["PAYJP_PUBLIC_KEY"] = ENV["PAYJP_PUBLIC_KEY"]

解決法

./bin/webpack

のコマンドを入力し、webpackのリロードを行うことで環境変数が再度読み込まれ、解決しました。

フロント周りはまだまだ仕組みが理解できていないことも多いので、都度調べて理解を深めていこうと思いました。