## 現バージョンで動作するようにする
### とりあえずインストール
[[Node.js]]のバージョンは14だった。
```console
$ npm i
```
[[fibers]]のインストールに失敗する。
```
npm ERR! Failed at the
[email protected] install script.
```
そもそも[[fibers]]は[[Node.js]] v16以降に対応していないので使うべきでない。[[fibers]]を使っているのは[[@nuxtjs.vuetify]]なので、そちらを更新してみる。マージ済のPRを発見。
- [fix: remove fibers dependency to support node\.js 14 on Windows by novobit\-whellmann · Pull Request \#390 · nuxt\-community/vuetify\-module](https://github.com/nuxt-community/vuetify-module/pull/390)
v1.11.3で修正されていそう。
- [Release v1\.11\.3 · nuxt\-community/vuetify\-module](https://github.com/nuxt-community/vuetify-module/releases/tag/v1.11.3)
ローカルバージョンの[[package.json]]は`^1.11.2`なので、ためしに`^1.11.3`に更新してみたら無事にビルド成功した。ただ、vulnerabilitiesが多い...。
`npm audit`してみるとほとんど[[loader-utils]]が原因ぽい。
```
Critical Prototype pollution in webpack loader-utils
Package loader-utils
Dependency of nuxt
Path nuxt > @nuxt/webpack > babel-loader > loader-utils
More info https://github.com/advisories/GHSA-76p3-8jx3-jpfq
```
まあとりあえず `npm audit fix`。warningが色々やばいけど、この辺のバージョンアップはいずれまとめてやるので。。
```
npm WARN deprecated
[email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @npmcli/
[email protected]: This functionality has been moved to @npmcli/fs
npm WARN deprecated
[email protected]: this library is no longer supported
npm WARN deprecated
[email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated
[email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated
[email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated
[email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated
[email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated
[email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated
[email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated
[email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\@nuxt\builder\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\@nuxt\components\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\@nuxt\builder\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\@nuxt\components\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @nuxt/
[email protected] requires a peer of @nuxt/types@>=2.13.1 but none is installed. You must install peer dependencies yourself.
npm WARN
[email protected] requires a peer of svelte@^3.x but none is installed. You must install peer dependencies yourself.
npm WARN
[email protected] requires a peer of swiper@^5.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/
[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY:
[email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
```
[[package.json]]には`devDependencies`に以下を追加してCriticalは1まで減らせた。
```json
"loader-utils": "^2.0"
```
最後は[[sass-loader]]周り。devの依存なので一旦捨ておく。
### とりあえずビルド
[[Nuxt.js]]が2.14からしれっと2.15に上がっているのが若干不安...。[[Firebase]]のconfigとかは作成してから`npm run dev`。
```console
$ npm run dev
ERROR in ./pages/settings.vue?vue&type=style&index=0&id=ae453fc8&lang=scss&scoped=true& friendly-errors 23:13:24
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 23:13:24
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'additionalData'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\syoum\git\github.com\tadashi-aikawa\togowl\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (C:\Users\syoum\git\github.com\tadashi-aikawa\togowl\node_modules\sass-loader\dist\index.js:36:28)
```
[[sass-loader]]周りのエラーっぽい。[[Nuxt.js]]や[[Vuetify]]にIssueを作成しろとのこと。
- [ValidationError: Invalid options object\. Sass Loader has been initialized using an options object that does not match the API schema · Issue \#917 · webpack\-contrib/sass\-loader](https://github.com/webpack-contrib/sass-loader/issues/917)
[[Nuxt.js]]のIssueを確認。
- [ValidationError: Invalid options object\. Sass Loader has been initialized using an options object that does not match the API schema · Issue \#8699 · nuxt/nuxt\.js](https://github.com/nuxt/nuxt.js/issues/8699)
今度は[[vuetify-module]]へと案内される。
- [Using SASS causes the build error: \`unknown property 'prependData'\` · Issue \#386 · nuxt\-community/vuetify\-module](https://github.com/nuxt-community/vuetify-module/issues/386)
[[@nuxtjs.vuetify|@nuxtjs/vuetify]]のv1.11.2では直ってそうとのこと。ローカルは`1.12.3`なのに直ってないんだが。。
> Update sass and sass-loader to the latest available versions to solve your problem. 🙃
`sass`と[[sass-loader]]が古いからかな..?
```json
"@nuxtjs/vuetify": {
"version": "1.12.3",
"resolved": "https://registry.npmjs.org/@nuxtjs/vuetify/-/vuetify-1.12.3.tgz",
"integrity": "sha512-6uVL3cfESMB00eVjJTNkyU4jvuPTGPn1yteo7lQTH6v+fxHcPaOgvzVYHIKSHIz1DecuOiB5c9b+YjsRP5+C8A==",
"dev": true,
"requires": {
"deepmerge": "^4.2.2",
"sass": "~1.32.13",
"sass-loader": "^10.2.0",
```
- `sass`の最新は`1.56.0`
- [[sass-loader]]の最新は`13.1.0`
- どちらも[[package-lock.json]]の制約に違反するのでやはり...
```console
$ qnm sass-loader
sass-loader 13.1.0 ↰ 1 month ago | 8.0.2 ↰ 2 years ago
├── 8.0.2 ⇡ 2 years ago (devDependencies, @nuxtjs/vuetify)
└─┬ @nuxtjs/vuetify
└── 10.3.1 ⇡ 4 months ago
```
[[sass-loader]]が`8.0.2`になっているのがいけない気がする...。[[package.json]]を修正。
```diff
- "sass-loader": "^8.0.0",
+ "sass-loader": "^10.0.0",
```
これでどうかな...。
```console
npm run dev
```
ビルドは通った！ けどエラーが...。
### 実行エラーをなくす
```
vue.runtime.esm.js:4603 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().
found in
---> <Layouts/default.vue> at layouts/default.vue
<Root>
```
[[Vue]]のバージョンが2.7系になっていたので、[[@vue composition-api|@vue/composition-api]]と競合しているのかもしれない。そちらの分離を行った方がいい。
#### [[Vue]]の[[Composition API]]を使う
[[📜nuxt2.15.8 x TypeScript x Electronのプロジェクトでvue.jsを2.7にアップデートしてみた]] を参考に。
```console
npm uninstall @vue/composition-api
npm i vue-demi@^0.13.1
```
`plugins/composition-api.js`を削除。
```diff
- import { defineComponent, reactive, watch } from '@vue/composition-api';
+ import { defineComponent, reactive, watch } from 'vue';
```
いくつか型でビルドエラーは出るが本質的ではないのであとで。
#### [[marked]]のエラー
```ts
export const toHTML = (markdown: string, inline: boolean = false): HtmlString =>
marked(markdown, {
breaks: true,
renderer: inline ? InlineRenderer : defaultRenderer,
});
```
```
client.js:103 TypeError: marked is not a function
```
[[marked]]はバージョンアップしていないはず...。requireに問題がありそう。
```ts
const marked = require("marked");
```
型定義をインストールしてimportする。
```console
npm i -D @types/marked
```
```diff
export const toHTML = (markdown: string, inline: boolean = false): HtmlString =>
- marked(markdown, {
+ marked.marked(markdown, {
breaks: true,
renderer: inline ? InlineRenderer : defaultRenderer,
});
```
一応これで実行エラーはなくなった。
### 型エラーの削除
> TS7006: Parameter 'x' implicitly has an 'any' type.
`vue`ファイルで`props.entries.map((x) => ...)`の`x`が`any`と判定されてしまう。`props.entries`は明確に型定義されているのに...。
[[script setup]]の記載すれば正しく推論されそうな気がする。
[[ESLint]]の邪魔だから消す。
```console
npm uninstall @nuxtjs/eslint-config @nuxtjs/eslint-config-typescript @nuxtjs/eslint-module babel-eslint eslint eslint-config-prettier eslint-plugin-nuxt
```
[[Playwright]]も古いので消す。また追加するときに1から。
```console
npm uninstall playwright expect-playwright jest-playwright-preset
```
## [[Node.js]]をv14からv18にアップデート
```console
volta pin node@lts
```
[[Node.js]]のバージョンを変更する。
```
rm package-lock.json
npm i
```
ビルドするとエラーが出る。
```
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\syoum\git\github.com\tadashi-aikawa\togowl\node_modules\webpack\lib\util\createHash.js:135:53)
```
[[📝Webpack4をNode.js18でビルドすると0308010Cエラー]] で解消。
## [[vue-awesome-swiper]]の廃止
```
npm ERR! While resolving:
[email protected]
npm ERR! Found:
[email protected]
npm ERR! node_modules/swiper
npm ERR! swiper@"^6.5.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer swiper@"^5.2.0" from
[email protected]
npm ERR! node_modules/vue-awesome-swiper
npm ERR! vue-awesome-swiper@"^4.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency:
[email protected]
npm ERR! node_modules/swiper
npm ERR! peer swiper@"^5.2.0" from
[email protected]
npm ERR! node_modules/vue-awesome-swiper
npm ERR! vue-awesome-swiper@"^4.1.1" from the root project
```
[[vue-awesome-swiper]]は非推奨になったので、[[Swiper]]の[[Vue]]用コンポーネントで再実装が必要。
[[Swiper]]をv8.4.5までバージョンアップする。
```console
npm uninstall vue-awesome-swiper @types/swiper
npm i swiper@latest
```
https://swiperjs.com/vue
ビルドすると続いて以下のエラー。
```
This dependency was not found: friendly-errors 14:54:32
friendly-errors 14:54:32
* swiper/vue in ./node_modules/babel-loader/lib??ref--12-0!./node_modules/ts-loader??ref--12-1!./node_modules/vue-loader/lib??vue-loader-options!./components/TaskSwiperEntry.vue?vue&type=script&lang=ts&
friendly-errors 14:54:32
To install it, you can run: npm install --save swiper/vue
```
[[Swiper]]のv7以上だと[[ESモジュール (JavaScript)|ESモジュール]]と見なされるそう。
[⚠️ Swiper7/8: "Module not found: Can't resolve 'swiper/react' \(vue/svelte/\.\.\.\)" · Issue \#4871 · nolimits4web/swiper](https://github.com/nolimits4web/swiper/issues/4871)
対応するには[[webpack5]]にしないと無理そう
[Pure ESM package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)
ただ、[[Nuxt2]]のままでは[[webpack4]]に依存してそうなので今はきつい。おとなしく[[Swiper]]をv6まで落とすのがよさそう。
```console
npm i swiper@6
```
`swiperRef`が`undefined`になって落ちる。とりあえず[[Composition API]]を[[script setup]]にしてみるが変わらず。エラーは以下。
```
Cannot read properties of undefined (reading 'value')
```
[Swiper Vue: Uncaught TypeError when using SwiperSlide as a wrapper · Issue \#5660 · nolimits4web/swiper](https://github.com/nolimits4web/swiper/issues/5660) と同じ問題ぽい。
先のエラーが解消しないので[[Swiper]]をv5にバージョンダウンする。。
```console
npm install vue-awesome-swiper@4 swiper@5
```
これだとvolunteersが発生するので結局[[Swiper]] v6に戻した。バージョンアップするには
- [[Swiper]]を最新(v8)にする必要がある
- そのためには[[Vue3]]対応が必要
- そのためには[[Nuxt3]]対応が必要
## 互換性の制限を弱める
このままでは[[Swiper]]が[[peer dependencies]]を満たさないので[[--legacy-peer-deps]]オプションをつけてインストールする。
```console
npm i --legacy-peer-deps
```