Node14のNuxt2.15にNuxt Bridgeを入れれるようにしてみた

かなり古いNuxtアプリにNuxt Bridgeを入れようとしたら、
かなりはまったので、いろいろ調べたときの備忘録(*´ω｀*)

昔の環境

Nuxt v2.15(webpack4)
Node v14
Buefy
node-sass v5.0.0
sass-loader v10.1.0

Nuxt2はwebpack4に依存。
sass-loaderのv11以降は、webpack5が必要。 sass-loaderのv10は、node-sassの4.0 or 5.0が必要 node-sassの5.0はNode15までしか動かない。。 @nuxt/bridgeは"node": "^14.16.0 || ^16.11.0 || >=17.0.0"

ので、Node/sass周りをなんとかしないとBridgeを入れることができなかった。。

導入手順

これらの記事に従って進めてる。

Nodeのバージョンアップ

古いバージョンだといろいろ問題が出たので、
Node14から一気に上げた。

$ fnm use v18.11.0

インストール

こんな感じになった。

{
  "dependencies": {
-    "nuxt": "^2.15.3",
+    "nuxt": "^2.17.2",
     "nuxt-buefy": "^0.4.8",
     "nuxt-property-decorator": "^2.9.1",
     "vee-validate": "^3.4.12",
+    "vuex": "^3.0.0"
  },
  "devDependencies": {
+    "@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-rc.2-28307913.ff6077a",
-    "@nuxt/types": "^2.15.3",
+    "@nuxt/types": "^2.17.2",
-    "node-sass": "^5.0.0",
+    "node-sass": "^8.0.0",
-    "sass-loader": "^10.1.0",
+    "sass-loader": "^10.4.1"
     "vuex-module-decorators": "^1.2.0"
  }
}

vuex@3を指定しないと、vuex-module-decoratorsが
vuex@4をインストールするので、vue@3が必要になりコンフリクトする。

Nodeを18にしたので、node-sassも8まであげ、
sass-loaderも10.4にあげた。

package.jsonの変更

nuxt-bridgeの場合はnuxt2コマンドを使うらしい。

{
  "scripts": {
-   "dev": "nuxt",
+   "dev": "nuxt2",
-   "build": "nuxt build",
+   "build": "nuxt2 build",
-   "start": "nuxt start",
+   "start": "nuxt2 start"
  },
}

nuxt.configの設定

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    vite: false,
    nitro: false,
    typescript: true,
  },
})

webpackのconfigの変更

xlsx-populateを使っていたので、
webpackのconfig周りをすこし修正。

import { defineNuxtConfig } from '@nuxt/bridge';
export default defineNuxtConfig({
  bridge: {
    vite: false,
    nitro: false,
    typescript: true,
  },
-  build: {
-    extend(config, ctx) {
-      config.node = { fs: "empty" };
-    }
- },
+ hooks: {
+   'webpack:config'(configs) {
+     for (let config of configs) {
+       config.node = { fs: "empty" };
+     }
+   }
  },
  generate: {
     dir: "public",
-    fallback: false
+    fallback: "404.html"
  },
});

合わせて、generate.fallbackもエラーだったので修正

Nodeバージョン周りのあれこれ

古いバージョンのNodeだといろいろ問題が出た。。

@nuxt/bridge: "node": "^14.16.0 || ^16.11.0 || >=17.0.0"
consola@3.2.3が"node": "^14.18.0 || >=16.10.0"`

実際にあったのはこのあたり。。

$ fnm use v14.18.3
$ npm run dev
...
 SyntaxError: Unexpected token '||='

$ fnm use v15.14.0
$ npm run dev
...
Error: Cannot find module 'node:util'

node-sassをDart sassにする

Node Sassはdeprecatedになってしまったので、
Dart Sassを使うようにする。

{
  "devDependencies": {
-    "node-sass": "^8.0.0",
+    "sass": "^1.69.5",
  }
}

ちょっと構文が違うらしいので、いくつか対応が必要。
該当箇所は、deepセパレータだけだったので、一括変換した。

  <style lang="scss" scoped>
- /deep/ {
+ ::v-deep {
  }
  </style>

とりあえず、動くようになった。。(*´ω｀*)
すこしずつ、置き換えていこう(*´ω｀*)

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。