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

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

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

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

感想

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

コメント

このブログの人気の投稿

ブラウザの拡張をつくろう!

いつもの前振り 初めましてもそうでない方もお元気ですか。 元気があれば何でも出来る!出来ません。 JavaScript Advent Calender 、13日目担当のArc Cosineです。 今回はJavaScriptのネタを何か書こうと思いましたが、どうせならツールの一つくらい作ったほうがいいだろうと言う事で土日に突貫工事で作ってみました。 Extension Maker http://www.tunsns.net/ExtensionMaker/ 時間切れで間に合いませんでしたが、Opera拡張だけは作れるようになっていますので、試してみてください。 チュートリアル トップヘアクセスしたら右下にある「今すぐ試してみる」をクリックしましょう。 そうしますと、基本情報を入力する画面が出ますので、必要な情報を入力してください。 今は入力チェックしていませんが、将来的にはちゃんとチェックするようにします。 次に、コードを入力する画面が出てきますので、ここにコードを貼り付けましょう。 Operaで動くUserScriptを試しに貼ってみると良いでしょう。 例えば、僕が昔書いたcolorful_favstarとかね! コード貼っておきますね。 コピペする場合は、view plainをクリックすると楽にコピペ出来ますよー。view plainの文字、薄くて見づらいけれど。 // ==UserScript== // @name Colorful Favstar.fm // @namespace http://moco.nond.es/ // @description Change tweet color and font size by favourites count like Favotter.net. // @version 0.1.1.20100808 // @include http://favstar.fm/* // @include http://ja.favstar.fm/* // @include http://de.favstar.fm/* // ==/UserScript== (function(doc){

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

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