Nuxt3アプリ内でページ遷移時に履歴を作らない方法
Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。
JavaScript
nagigateToメソッドのreplaceオプションを設定する。
navigateTo('/home', { replace: true })
HTML要素
RouterLinkもしくはNuxtLinkのreplace属性を設定する。
<RouterLink :to="/home" replace> </RouterLink>
関連ネタ
Nuxt3のビルド時に `Rollup failed to resolve import "vue"` が起きたら
事象
Nuxt3アプリ(Static-Hosting)で ビルド時(nuxt build)にエラーが発生。
尚、nuxt devでは発生しなかった。
$ pnpm nuxt build [vite]: Rollup failed to resolve import "vue" from "(プロジェクトルート)/node_modules/.pnpm/nuxt@3.4.3_@types+node@18.0.0_typescript@5.3.3/node_modules/nuxt/dist/app/entry.js". build.rollupOptions.external at viteWarn ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46561:23) at onRollupWarning ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46585:9) at onwarn ((プロジェクトルート)/node_modules/.pnpm/vite@4.3.5_@types+node@18.0.0/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46332:13) at Object.onwarn ((プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:25305:13) at ModuleLoader.handleInvalidResolvedId ((プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23940:26) at (プロジェクトルート)/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23900:26
構成
- pnpm
- monorepo構成
- v8.10.5
- Nuxt v3.4.3
- vite v4.3.5
解決策1(非常に非推奨)
pnpm install --shamefully-hoistでインストールし直す。
ただし、非常に非推奨*1。
$ pnpm install --shamefully-hoist ✔ The modules directory at "(プロジェクトルート)/node_modules" will be removed and reinstalled from scratch. Proceed? (Y/n) · true
参考
解決策2
.npmrcに以下の設定を追加し、再度pnpm installするとビルドに成功した。
また、node_moduleフォルダはすべてもモジュールから削除した。
正直pnpm install --shamefully-hoistと同じだと思うが、設定がコードに記述されているかどうかの違いだと思われる(確証なし)。
# .npmrc shamefully-hoist=true
失敗した方法
GoogleのAI Bardに聞いてみた。
(一部抜粋) エラーメッセージから、Nuxt のビルド時に vue モジュールが外部化されていないことが原因であると分かります。 vue モジュールは、Nuxt の動作に必須のモジュールです。これを外部化すると、Nuxt の動作に問題が生じてしまう可能性があります。 このエラーを解決するには、vue モジュールを外部化しない方法をとるか、外部化する場合でも、明示的に build.rollupOptions.external に追加する必要があります。
nuxt buildでエラーになったモジュールをnuxt.config.tsのbuild.rollupOptions.externalに設定する。
→ビルドはできるが、vue自体が外部化され参照エラーでアプリ起動に失敗する。
- nuxt.config.ts
export default defineNuxtConfig({
// 追加した設定のみ記載
vite: {
build: {
rollupOptions: {
external: [
'vue',
'vue-router'
]
}
}
}
})
Volta + pnpm開発環境でグローバルと異なるNode.jsバージョンを利用する際のTIPS
はじめに
Volta + pnpm環境でnode.jsのバージョンがグローバルとプロジェクトで異なる開発環境を構築している。
pnpm install コマンドを実行した際に、グローバルのバージョンの方が優先されてしまうので、指定したNode.jsバージョンで実行する方法を調査した。
続きを読む
続々々・モーダルなコンポーネントのフォーカス管理(dialog要素)
はじめに
これまでモーダルを表示したときのTABによるフォーカス移動でバックグラウンドに移動するのを防ぐための実装をしてきた。この方法は「フォーカストラップ」と呼ぶらしい。*1
注釈のサイトにユーザビリティやスクリーンリーダによるTAB移動問題の指摘もあったので、今後はこの実装をやめる。
また、最近dialog要素を知り簡単に実装できたので記事にした。
過去の記事
モーダルなコンポーネントのフォーカス管理 - my coding note
続・モーダルなコンポーネントのフォーカス管理（Nuxt.js版） - my coding note
続々・モーダルなコンポーネントのフォーカス管理（Nuxt.js版 2） - my coding note
続きを読むTypeScript + Jestでテストコードのpath設定
はじめに
TypeScriptのpaths設定で@/folderのようにパスを指定した。
テストファイルでもmoduleのimportを@でパスを設定して、絶対パスで呼び出したい。
// test/Util/DateUtil.test.ts import { dateFactory } from '@/Util/DateUtil'
しかし、そのままテストを実行（例:pnpm test）すると、Cannot find module '@/Util/DateUtil' from 'test/Util/DateUtil.test.ts'となる。
先人の情報に感謝しつつ、ここに解決方法を記載する。
続きを読む