かなり古い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>
とりあえず、動くようになった。。(*´ω`*)
すこしずつ、置き換えていこう(*´ω`*)
参考にしたサイト様
- Demystifying Nuxt Bridge - Speaker Deck
- Migrate to Nuxt Bridge: Overview
- Use SCSS with Nuxt 3
- nuxt.js - How to use postcss-scss parser in Nuxt3? - Stack Overflow
- support styleResources · Issue #71 · nuxt/vite
- bridge/packages/bridge/package.json at v3.0.0-rc.2 · nuxt/bridge
- Lifecycle Hooks · Nuxt API
- support for extending build within
nuxt.config
· Issue #12778 · nuxt/nuxt