Nuxt3にBridgeを使って移行してみる【Nuxt2→3】

はじめに

Nuxt3のベータ版が公開されれたので実際にNuxt2からNuxt3に移行してみることにしました。

また、新しくNuxt3を作る方法はこちらの記事で紹介してます。

Nuxt2の構成です。

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in nuxt-bridge
? Project name: nuxt-bridge
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

やり方

1. Nuxt2をアップグレード

  1. package-lock.jsonを削除
  2. package.jsonの"nuxt": "^2.15.7"を"nuxt-edge": "latest"に変える
  3. npm install

2. Nuxt Bridgeをインストール

npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge

3. nuxi

package.jsonのscriptをnuxiを使ったものに変えます。

変更前。

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build"
  }

変更後。

  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi generate"
  }

dev、buildの2つのscriptを変えました。

ここはtargetをStatic target にするかServer targetにするかで変わるので公式サイトを確認して下さい。

4. nuxt.config.js

CommonJS(module.exportsとかrequire)がサポートされなくなるそうなので書き換えます。

変更前。


export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-bridge',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

変更後。

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'nuxt-bridge',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
})

ちなみにこれは将来的にCommonJSはサポートされなくなるという話みたいです。なのでやらなくても動きます。 むしろimportに変えたらうまくいきませんでした。

5. .gitignore

.outputを追加します。

その他やること

今回の自分のプロジェクトでは必要ありませんでしたが、必要に応じて行って下さい。

デバッグしてみる

Bridgeへの移行の設置は完了したので、

デバッグしてみます。

npm run dev

うまくいきました。

おまけ

nuxt.config.jsをCommonJSからimportに変えたらデバッグで失敗した。

元々のCommonJS方式に戻したら成功しました。

現在、Nuxt3はBeta版なのでそのうちうまくいくようになると思います。

 WARN  [worker] Named export 'isWindows' not found. The requested module 'std-env' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'std-env';
const { provider, isWindows } = pkg;


  import { provider, isWindows } from 'std-env';
  ^^^^^^^^^
  SyntaxError: Named export 'isWindows' not found. The requested module 'std-env' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from 'std-env';
  const { provider, isWindows } = pkg;
  
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async loadESM (node:internal/process/esm_loader:88:5)
  at async handleMainPromise (node:internal/modules/run_main:65:12)