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

nyaan更新でハマった

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

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

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

以前のCopyWebpackPluginは

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

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

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

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

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;
    }
}

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

感想

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

おい、にゃーん、にゃーんじゃないか。お前、今まで何してたんだよ？え？netlifyの設定のせいで更新できなかったって？おい、お前いつの間にそんな面倒なことになってたんだよ。

にゃーぉ https://t.co/HMYt1bSf8E #nyaan

— ArcCosine (@ArcCosine) August 7, 2020