スキップしてメイン コンテンツに移動

にゃーんを更新しようとしたら色々とハマった

nyaan更新でハマった

拙作だが、にゃ~んというふざけたウェブサービスを作っている。 猫の画像が出てきて、ボタン(?)をクリックするとにゃーんとつぶやけるだけのシンプルなサービスである。

これを本当に久々に更新したら、色々エラーが出て、知見を得られたので、公開。

CopyWebpackPlugin の構文が変わっていた。

以前のCopyWebpackPluginは

new CopyWebpackPlugin([
    {
        from: "src/images/",
        to: ""
    },
]);

と書くことが出来たが、今はできない。

new CopyWebpackPlugin({
    patterns: [
    {
        from: "src/images/",
        to: ""
    },
    ]
});

と書く必要がある。 いつの間にそうなってたんだろうw 配列から、ハッシュへ。 まあこの辺はエラーメッセージなどを舐めればそこまで難しくはない。

deploy 時のエラー

> webpack --config webpack.prod.config.js --mode production
/opt/build/repo/node_modules/copy-webpack-plugin/node_modules/p-limit/index.js:30
    } catch {}
            ^
SyntaxError: Unexpected token {

deploy時に謎のエラーが出ていた。これは、https://github.com/sindresorhus/p-limit/commit/b35faf54fb0871d9ae592069a18083a2ba15d8a9#diff-168726dbe96b3ce427e7fedce31bb0bcに書いてある通り、Node.js 10からは、valid syntax になったからだったようだ。 netlifyでビルドするためのNodeのバージョンを上げれば良かったので、ここのドキュメントを参考にして、Build&deploy < Environment < Environment variables に

NODE_VERSION

を追加して、10を指定した。 これでビルドエラーは解決された。

Terserのエラー

CopyWebpackPluginで、圧縮したいjsがあった時、以前は、こうやって

{
    from: 'src/js/serviceworker.js',
    to : '',
    transform: function(content, path) {
        return Terser.minify(content.toString()).code.toString();
    }
}

みたいに噛ましてたけれど、これだと動かなくなった。

{
    from: 'src/js/serviceworker.js',
    to : '',
    transform: async function(content){
        const result = await Terser.minify(content.toString());
        return result.code;
    }
}

こうやって書き直したら動いた。 これの解決は結構時間が掛かった。

感想

全部修正するのに意外と時間が掛かったが、なんとか動いて良かった。

コメント

このブログの人気の投稿

Amazonの不正アクセス→注文履歴が表示されないという謎の現象

Amazon から身に覚えのない注文が飛んできた Amazonマーケットプレイス出品者「ngahuibaihuo」がお客様のご注文を承ったことをお知らせいたします。 というメッセージと共に全く身に覚えの無い注文が5点飛んできた。 値段は一つあたり11円と非常に低額であったが、これは不正アクセスだと判断。 すぐにアマゾンにログインしなおし、パスワードの変更を行った。 面倒臭がっていた2段階認証も設定した。 正直、かなり焦った。 この注文は、なぜか自動的に、「 非表示にした注文 」に変更されていた。 なので、注文履歴をぱっと見ただけでは、不正な注文があったと思われないようになっている。 非表示にした注文を表示する 注文履歴のページから、ドロップダウンリストを選び、一番下の「 非表示にした注文 」を選択する。 これで不正アクセスで注文された履歴が表示されるはず。 後は、それらの商品を選択してキャンセルすればOKだ。 残る謎 Amazonのパスワードは、自動生成で作成した難読系なので、そう簡単に不正アクセス出来るようなものでは無い。 しかしながら、2段階認証を設定していなかったのが、今回のような件を引き起こしてしまったのかもしれない。 注文の金額がやたらと低かったのも気になる。 11円の商品を3個とか2個とか購入していた。 この「ngahuibaihuo」というアカウントが被害にあった側なのか、むしろこいつが犯人なのかは全く分からないが、今回の手口はかなり凝ったやり方になっているので、似たような被害に合った方の参考になればと思っている。 良く分からない人は遠慮せずにAmazonのカスタマーセンターに電話して聞くのが一番だと思う。

マウスを買い替えた話

マウスを買い換える 今まで、MicroHardの Sculpt Egonomic Mouse を愛用していた。 (Amazonの履歴より)2016年に購入していたので、4年ほど使っていた算段になる。 キーボードは10年以上使い込んでいるが、マウスは思ったよりも使い込んでいなかったというのが個人的な印象だ。 キーボード同様、マウスも毎日触る大切なI/Fであり、その性能にはこだわりを持っていた。 実際に、Sculpt Egonomic Mouseはここ最近まで十二分に素晴らしい性能を発揮しており、不満点はなかった。 が、流石に4年も使っていると壊れてしまうのがハードの悲しい所。 ホイールやトラッキング性能は全く落ちなかったのだが、ボタンが壊れてしまった。 クリック出来なくなる事がしばしば発生するようになってしまった。 こればっかりは、致し方ない事なのだが。 そして、今回久々にLogicoolのマウスを購入することにした。 Bluetoothが有効になるだけでなく、2台のマシンでの切り替えも可能なので、色々と捗っている。 以前使っていたタイプは4ボタンだが、これは5ボタン。 ボタン数はやはり4ボタン以上欲しい。 ここ数日使ってみて分かったが、やはり大分前からクリックボタンが壊れてたんだと改めて実感。 Vivaldiでのマウスジェスチャが綺麗に決まるので、今までのあの苦労は何だったのだろうという気持ちが大きい。 久々にマウスジェスチャの良さを体感出来たのも新たな発見である。 マウスについて 自分は、今まで色々なマウスを使ってきているが基本的にMicroHardか、Logicoolのどちらかを採用している。 久々のLogicoolだが、Logicoolもかなり性能の良いマウスを作っているので、非常に安定感がある。 その他の会社のマウスも、もちろん使ったことがあるが、割と早く壊れる印象。 4年とか5年くらい長く使いたければ、どちらかの会社のを購入するほうが最終的には一番お買い得な気がしている。 ゲームするような人間ではないし、マウスよりもキーボード触っている時間の方が圧倒的に長いので、キーボードに比べるとマウスに投資している額は少ないが、それでもなるべく良いものを長く使っていくという方針に変わりはない。 安物買いの銭失いは、もう懲り懲りだからだ。