skysan's programming notebook

コーディングして思ったことなどを気ままに

Nuxt3アプリ内でページ遷移時に履歴を作らない方法

Nuxt3アプリ(PWA)でページ遷移時にブラウザの履歴を残したくないので調べた。

JavaScript

nagigateToメソッドのreplaceオプションを設定する。

navigateTo('/home', { replace: true })

navigateTo · Nuxt Utils

HTML要素

RouterLinkもしくはNuxtLinkのreplace属性を設定する。

<RouterLink :to="/home" replace>
</RouterLink>

<NuxtLink> · Nuxt Components

関連ネタ

skysan87.hatenablog.com

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

.npmrc | pnpm

失敗した方法

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バージョンで実行する方法を調査した。

続きを読む

ブラウザで動くCSV加工アプリ(WASM版SQLite利用)を作ってみた

はじめに

適度なデータ量のCSVの集計する機会があり、WebAssembly版のSQLiteを使ってブラウザでCSVを加工する簡単なWebアプリを作ってみた。

成果物

ローカルHTMLファイルで実行

続きを読む

続々々・モーダルなコンポーネントのフォーカス管理(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'となる。

先人の情報に感謝しつつ、ここに解決方法を記載する。

続きを読む

package.jsonのexportsフィールドを設定する(TypeScript)

はじめに

自作のnpmパッケージを参照するときにエントリポイントを複数公開して、別のパッケージでimportしたかった。しかし、モジュール '***/***/***' またはそれに対応する型宣言が見つかりません。となり、importに失敗したため、調査結果をメモする。

前提条件

  • pnpm workspaceでモノレポ構成
  • typescript v5.0.4
  • tscでビルドしない
    • 最終的にviteやwebpackなどのバンドラーツールでビルドする(参考)
続きを読む