[改善]Docusaurusのバージョンアップ v2.0.0-beta.13

[h-yoshikawa44]

対象環境

開発・本番

目的

beta.0 にしてからアプデしてなかったのでアプデしたい

作業内容

• Docusaurus のバージョンアップ
• 動作確認
• README 更新
• CHANGELOG 更新

[h-yoshikawa44]

css-loader の package.json の warning

アプデ後、サーバ起動時に以下の警告が出た。

(node:21220) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\ballk\development\my-projects\portfolio\node_modules\css-loader\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

@docusaurus/core の依存関係にある css-loader の package.json の問題だったので、一旦 yarn.lock から css-loader を削除してインストールしなおすことで、css-loader のアプデをしたところ解消された。

[h-yoshikawa44]

一部インライン SVG がバグった

なんか、透明になったり色が変わったりしてる。

ちなみに一個ずつインポートして表示する分には問題ない。

さらっとドキュメント見た感じだと、基本的な使い方は変わってなさそう？
もうちょっとよく見てみる。

↓
こんな Issue を見つけた

• Docusaurus - Do not use React svg components for regularly used icons

訳すると

定期的に使用するアイコンにReactsvgコンポーネントを使用しないでください

とあるので、map で回すようなところには使えなくなった、ということなのかもしれない。

素直に画像パスを img タグに渡す方式に戻して対応。
（一度、useBaseUrl を使わずにリリースしてしまったが、翌日気づいた修正した）

↓
対応後
Twitter で Docusaurus メンテナの Sebastien Lorber さんからこんなリプをいただいた。

It's not an advice for users, it's to optimize Docusaurus theme

Your issue may be related to upgrading SVGR recently

• Docusaurus - chore: update @svgr/webpack to version 6

SVG をコンポーネントのようにインポートする部分は @svgr/webpack というパッケージが担っているらしく、そのアプデがあったので、その影響かもとのこと。

[h-yoshikawa44]

Infima のスタイルが微妙に変わってる

気付いたところとしては、table 要素の width: 100% がなくなってた。
なので、自分でスタイル追記することにした。