かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Node.js

Node.js ファイル名から拡張子を取得したい

正引き表現や . で区切る方法を考えてたけど path を使えば簡単だった path.extname(path) で拡張子を取得できる path.extname で取得できる拡張子は . 始まりの文字列 拡張子が無い場合は空文字列が返される サーチクエリがある場合は拡張子含まれる import…

Vercel Next.js 環境ごとに title, favicon を変えたい

Vercel にホストした Next.js のアプリがあり、local環境、preview (ステージング)、本番環境 があり開発中の確認で今どれを見ているのかドメインを見なくても解るように title と favicon を変更して判別しやすいようにした 環境を判定する Vercel の previ…

Node.js URL を作りたくて path.join を使うと https:// が https:/ に変換されてしまう

SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…

Vercel プレビュー環境かどうか判別したい!

Vercel にデプロイした Next.js のアプリで 本番環境 (production) と 開発環境 (development) / プレビュー (preview) とで アナリティクスなどを出し分けけしたく NODE_ENV で判別していたのですが、プレビュー時に本番環境と同じになってしまう問題にハマ…

Next.js dev サーバーでも https したい

Next.js を使ったサイトを開発していて、外部の API を叩いたり CDN のリンクを使ったりするので本番環境と同じ https (TLS)で開発できたほうが環境差によるバグを早めに発見できるので開発環境も https にしたかった 公式のドキュメントに server.js を使っ…

npm / yarn npm script でオプションを渡す方法の違いのメモ

npm script で実行するアクションにオプションをコマンドラインから渡す方法が npm と yarn で微妙に違って戸惑ったのでメモ npm script { "scripts": { "test": "jest" } } jest を実行する test コマンドがあり、GitHub actions では coverage を表示させ…

続・フロントエンド開発環境: チーム開発するリポジトリで node のバージョンを揃えたい

Volta, asdf, nodenv などメンバーの node.js のバージョン管理ツールが異なる状況 + GitHub actions で実行される node.js のバージョンもいい感じに揃えたい 1. node のバージョンが指定と異なる時に npm install を制限する engine-strict=true を使って …

Jest テスト内で axios のインポートが出来ないエラーにハマる

Jest を使ったテストをしていて axios を使っているコンポーネントのテストで下記のようなエラーになった SyntaxError: Cannot use import statement outside a module > 1 | import axios from 'axios'; | ^ SyntaxError: Cannot use import statement outs…

AWS Amplify で node.js v18 系を使いたいにハマったログ

AWS Linux:2 で Node.js v18 系を使いたい場合は `nvm use 18` コマンドを実行させるのが良さそう

Node.js バージョン管理ツールを VOLTA にしてみた!

Node.js のバージョン管理ツールに asdf を使っていたのですが VOLTA が速くて良いよとオススメされたので乗り換えてみた ⚡ VOLTA の特徴 ⚡ Rust製で早い プロジェクトディレクトリに入ると自動でバージョンが切り替わる (バージョンは package.json に記録…

TypeScript jsonwebtoken で JWT を verify しようとしたら Right-hand side of 'instanceof' is not an object というエラーになった件

Next.js で jsonwebtoken を使って作成した JWT から中に含まれるデータを取り出そうとま verify しようとしたらエラーになってしまったので原因と解決策のメモ 環境 Next.js 13.2.1 React 18.2.0 TypeScript 4.9.5 jsonwebtoken 9.0.0 状況 // api import {…

npm パッケージをアップデートしたい

npm outdated から手動で uninstall -> install するか npm-check-updates パッケージを使って一括でアップデートするのが楽そう

Vite TypeScript __direname がエラーになる

Vite + TypeScript + ESLint で作った環境で Multi-Page App の設定をしようとした際に __direname がエラーになってしまったのでメモ TypeScript Cannot find name '__dirname' Cannot find name '__dirname' のエラーが出る場合は Node の型が無いので @ty…

npm WARN config init.author.name Use `--init-author-name` instead.

Node.js のバージョンを上げて npm コマンドを使ったら次のような warning が表示された npm WARN config init.author.name Use `--init-author-name` instead. npm WARN config init.author.email Use `--init-author-email` instead. npm WARN config init…

Express (TypeScript) で立てた GraphQLサーバーでセッションを使うメモ

Express (TypeScript) で作った local 開発用に立てた実験用サーバーに express-session モジュールを使ってセッションを使えるようにしたのメモ 環境 express@4.18.1 graphql@16.5.0 express-graphql@0.12.0 express-session@1.17.3 typescript@4.7.2 expre…

Express GraphQL サーバーから返すエラーに独自フィールドを追加したい

Express (TypeScript) で作成した GraphQL サーバーがエラーを返す際に message 以外の独自フィールドを追加してみたメモ express@4.18.1 graphql@15.8.0 express-graphql@0.12.0 typescript@4.7.2 Express GraphQL サーバー Mutation で username を引数に…

初めての GraphQL。Code Generator で型を生成するまでのメモ

GraphQL Code Generator で型を生成できるまでのメモ。千里の道も一歩から!

Node.js Express のレスポンスで Unhandled Promise Rejection エラーが発生

✗ res.json({ …data }).sendStatus(200) ○ res.status(200).json({ …data })

TypeScript default import にハマる

default import と `* as` を使った namespace import な default import とで CommonJS のモジュールのインポートのされ方が異なる。

Vite + React のプロジェクトでは require が使えない? Uncaught ReferenceError: require is not defined

Vite の DEV モードはネイティブESMを利用しているので CommonJS の require は使えない。代わりに import や Dynamic import を使えばOK

ts-node で path alias が効かないにハマる

結論 tsconfig-paths を使って ts-node, ts-node-dev に -r tsconfig-paths/register オプションを渡してあげれば OK

npm パッケージの依存しているパッケージを知りたいぞい!

npm パッケージを使っていてライブラリのアップデートが速いものは、新しくなった方法を試そうとしたら依存しているパッケージが変更になっていたりでハマってしまうことが割とあります。 このパッケージが依存してるライブラリ何?が知りたい時のメモ npm v…

npm 上位階層にある node_modules を使った npm-script を実行したい

今回も文章量に対して大変地味なエントリーです! 一つのリポジトリ内にあるディレクトリで別々に sass をコンパイルしなければならないプロジェクトがあり、ディレクトリごとにコンパイルするためのパッケージをインストールするのは管理面でも避けたかった…

フロントエンド開発環境: チーム開発するリポジトリで node のバージョンを揃えたい

チームでフロントの開発する時に node のバージョンが異なっているとインストールされるパッケージのバージョンとか依存とかで面倒なことになる可能性があるので揃えておくのが良いと思っています。 〇〇のバージョンをインストールしてください。とお願いし…

Sass の npm パッケージは sass と node-sass どっちを使えばいいの?

フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち?ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…

nodenv でインストールしたいバージョンが表示されない時にやること

nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…

JavaScript, Node.js 先に作っておいた変数を named export したい

default exports は好きな名前で import できてしまうから極力 named exports / import にしたほうが良いと教えてもらったので、先に変数が作られてる場合どうするんだろう?と思い調べて見たメモ。 ESModules の named exports exports // foo.ts export co…

Firebase Cloud Firestore で複数の OrderBy で 9 FAILED_PRECONDITION: The query requires an index なエラーになった

Cloud Firestore からデータを取ってこようとしたら次のようなエラーが返ってきた。 { error: { code: 9, details: "The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/<projectName>/firestore/indexes?...", mes</projectname>…

環境構築 macOS Big Sur : nodenv で node.js 環境をクリーンインストールしたメモ

Macが壊れたので新規環境に Node 入れてたのでログとして 環境 macOS Big Sur Homebrew インストール済み zsh Homebrew のインストール $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" anyenv のイン…

firebase firebase init で Error Failed to list Firebase projects. になる

久々に Firebase Hosting を使おうとしてしたら firebase init の Project Setup で 既にあるプロジェクトを使おうと思い Use an existing project を選択すると Error: Failed to list Firebase projects. See firebase-debug.log for more info. になって…