Stencilを2.14.2から3.3.0にアップグレードした時の覚書

Stencil.jsのメジャーアップデートで、ライブラリの更新を忘れていたため、エラーが発生。具体的には、非推奨になった出力ターゲット`dist-custom-elements-bundle`を使用していたため、`dist-custom-elements`に変更する必要があった。また、TypeScriptのバージョンが合わなかったため、アップグレードも必要だった。依存関係のエラーを解決し、ビルドしていけば、問題なく動作した。

v3へのメジャーアップデートがリリースされてから、更新するのを忘れていたライブラリがありました。

今回はアップグレードを実施した際に表示されたエラーやその対応を覚書として記録します。

実行したコマンド

アップグレード自体は、npm installで終わりです。

% npm i @stencil/core@latest

ただし今回はメジャーアップデートなので、すんなり行かない想定でいきましょう。

遭遇したエラーとその対応

遭遇したエラーと対応の記録をここに共有します。

`dist-custom-elements-bundle`は非推奨になったので`dist-custom-elements`に変更する

アップデートしたので、stencilコマンドを早速実行しました。

すると遭遇したのがこのエラーです。

$ stencil build --dev --watch --serve
[11:38.2]  @stencil/core
[11:38.6]  v3.3.0 🍭

[ ERROR ]  Invalid outputTarget type "dist-custom-elements-bundle". Valid outputTarget types include: "www", "dist",
           "dist-collection", "dist-custom-elements", "dist-lazy", "dist-hydrate-script", "docs-json", "docs-readme",
           "docs-vscode", "docs-custom", "copy", "custom", "stats"

ドキュメントをみると、stencil.config.tsに非推奨の設定がある様子でした。

dist-custom-elements-bundle 出力ターゲットは dist-custom-elements とほぼ同じですが、Stencil v2.12.0 で非推奨となり、ツリーシェイク機能が向上した dist-custom-elements が使用されるようになりました。

https://stenciljs.jp/docs/custom-elements/

stencil.config.tsを変更します。

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
export const config: Config = {
  namespace: 'stripe-elements',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [
    sass()
  ]
};

TypeScriptの`AbortSignal`でエラーがでる

続いてnpm startでアプリを開くと、このエラーが表示されました。

TypeScript
Subsequent variable declarations must have the same type. Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.

エラーでググると、他のライブラリも古いことが起因している様子のIssueやブログがでてきました。

ということで、npm-upgradeでアップグレードします。

% npx npm-upgrade       
Checking for outdated production, optional, development, peer and bundled dependencies for "/Users/okamotohidetaka/development/package.json"...
[====================] 21/21 100%

New versions of active modules available:

  @stripe/stripe-js                   ^1.25.0   →   ^1.54.0 
  i18next                             ^20.3.3   →   ^22.5.0 
  i18next-browser-languagedetector     ^6.1.2   →    ^7.0.2 
  ionicons                             ^6.0.1   →    ^7.1.2

ライブラリごとにアップデートするかの確認が入ります。

? Update "@stripe/stripe-js" in package.json from ^1.25.0 to ^1.54.0? (Use arrow keys)
❯ Yes 
  No 
  Show changelog 
  Ignore 
  Finish update process

今回はアップグレード用のブランチを切ってあるので、思い切って全部更新してみました。

These packages will be updated:

  @stripe/stripe-js                   ^1.25.0   →   ^1.54.0 
  i18next                             ^20.3.3   →   ^22.5.0 
  i18next-browser-languagedetector     ^6.1.2   →    ^7.0.2 
  ionicons                             ^6.0.1   →    ^7.1.2 
  @stencil/sass                        ^1.5.2   →    ^3.0.3 
  @typescript-eslint/eslint-plugin    ^4.28.3   →   ^5.59.8 
  @typescript-eslint/parser           ^4.28.3   →   ^5.59.8 
  eslint                              ^7.31.0   →   ^8.41.0 
  eslint-plugin-react                 ^7.24.0   →   ^7.32.2 
  jest                                ^26.6.3   →   ^29.5.0 
  @types/jest                        ^26.0.24   →   ^29.5.1 
  jest-cli                            ^26.6.3   →   ^29.5.0 
  np                                   ^7.5.0   →    ^8.0.2 
  prettier                             ^2.3.2   →    ^2.8.8 
  prettier-eslint                     ^12.0.0   →   ^15.0.1 
  prettier-eslint-cli                  ^5.0.1   →    ^7.1.0 
  puppeteer                           ^13.5.1   →   ^20.4.0 
  @types/puppeteer                     ^5.4.3   →    ^5.4.7 
  typescript                           ^4.5.4   →    ^5.0.4 

? Update package.json? Yes

node_modules/の中身はまだ変わっていないので、インストールしなおします。

% npm i

`npm install`で依存関係エラーが発生する

npm installを実行した際、ESLintまわりでエラーが発生しました。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   dev @typescript-eslint/eslint-plugin@"^5.59.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @typescript-eslint/eslint-plugin@"<5 && ^4.0.0" from @stencil/[email protected]
npm ERR! node_modules/@stencil/eslint-plugin
npm ERR!   dev @stencil/eslint-plugin@"^0.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/okamotohidetaka/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/okamotohidetaka/.npm/_logs/2023-06-01T08_46_09_147Z-debug.log

"@stencil/eslint-plugin"周りっぽい気配です。

最新版を調べようとしたところ、まさかのDeprecationメッセージに遭遇しました。

@stencil/eslint-plugin has been deprecated. Please see the community-driven package, ‘@stencil-community/eslint-plugin’

https://www.npmjs.com/package/@stencil/eslint-plugin

仕方ないので入れ替えましょう。

$ npm uninstall @stencil/eslint-plugin
$ npm install --save-dev @stencil-community/eslint-plugin

.eslintrc.jsonのextendsも更新しましょう。

{
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@stencil-community/recommended"
  ],

すると今度は「TypeScriptを4系に入れ替えろ」と言われました。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"^5.0.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@"^4.9.4" from @stencil-community/[email protected]
npm ERR! node_modules/@stencil-community/eslint-plugin
npm ERR!   dev @stencil-community/eslint-plugin@"^0.5.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

今回は言われた通りに4系を入れ直します。

$ npm i -D [email protected]

これでインストールが成功しました。

added 1020 packages, and audited 1021 packages in 15s

234 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

テストがエラーになる

テストコマンドにも、エラーが出ていました。

$ stencil test --spec
[28:35.6]  @stencil/core
[28:36.1]  v3.3.0 🍭

[ ERROR ]  Please install supported versions of dev dependencies with either npm or yarn.
           npm install --save-dev @types/[email protected] [email protected] [email protected]

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

npm-upgradeでアップグレードしたJestのバージョンと、Stencil側が使っている（？）バージョンが一致しない様子です。

指示通りにライブラリを追加します。

npm install --save-dev @types/[email protected] [email protected] [email protected]

これでテストも復活しました。

$ stencil test --spec
[30:39.3]  @stencil/core
[30:39.9]  v3.3.0 🍭
[30:40.2]  testing spec files
[30:40.3]  jest args: --spec --max-workers=8
 PASS  src/components/stripe-payment-sheet-modal/test/stripe-payment-sheet-modal.spec.tsx
 PASS  src/components/stripe-payment-request-button/test/stripe-payment-request-button.spec.tsx
 PASS  src/components/stripe-element-modal/test/stripe-element-modal.spec.tsx
 PASS  src/components/stripe-payment-sheet/test/stripe-payment-sheet.spec.tsx

Test Suites: 4 passed, 4 of 8 total
Tests:       15 passed, 15 total
Snapshots:   3 passed, 3 total
Time:        2.814 s
Ran all test suites.

ビルドエラーに対処する

今度はビルドを試しましょう。

[ ERROR ]  Package Json: package.json:9:3
           package.json "types" property is set to "dist/custom-elements/index.d.ts" but cannot be found. It's
           recommended to set the "types" property to: ./dist/types/components.d.ts

      L8:  "es2017": "dist/esm/index.mjs",
      L9:  "types": "dist/custom-elements/index.d.ts",
     L10:  "collection": "dist/collection/collection-manifest.json",

[ WARN  ]  Package Json: package.json:6:3
           package.json "module" property is set to "dist/custom-elements/index.js". It's recommended to set the
           "module" property to: ./dist/index.js

      L5:  "main": "dist/index.cjs.js",
      L6:  "module": "dist/custom-elements/index.js",
      L7:  "es2015": "dist/esm/index.mjs",

[31:53.6]  build failed in 9.36 s

こちらもコケました。

「package.jsonのmoduleとtypesのパスを変えろ」と言われていますね。

指示通りに変更しましょう。

  "module": "dist/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/components.d.ts",

ビルドしてみる

一通りエラーを解決した（はず）なので、ビルドします。

$ stencil build --docs
[35:25.4]  @stencil/core
[35:26.2]  v3.3.0 🍭
[35:29.6]  build, stripe-elements, prod mode, started ...
[35:29.8]  transpile started ...
[35:34.4]  transpile finished in 4.58 s
[35:34.4]  copy started ...
[35:34.6]  generate custom elements + source maps started ...
[35:34.6]  generate lazy + source maps started ...
[35:36.0]  copy finished (2676 files) in 1.60 s
[35:36.9]  generate custom elements + source maps finished in 2.25 s
[35:38.3]  generate lazy + source maps finished in 3.68 s
[35:38.4]  build finished in 8.87 s

✨  Done in 14.48s.

いけました。