node18に対応させた

[emrum01]

概要

node.js 18に対応させた。

やったこと

node.js内部のOpenSSLのバージョンが上がり、storybookの内部のwebpackと不整合が生じたので、webpack5をインストールすることで対応した

以下のパッケージをインストールした

• "webpack": "^5.75.0"
• "@storybook/builder-webpack5": "^6.5.14",
• "@storybook/manager-webpack5": "^6.5.14",

動作確認

storybookが問題なく動くかどうか確かめる
yarn storybook
yarn build-storybook

[taka10257]

@emrum01
自分で調べろって話なんですけど、storybook起動で以下の警告出ているので出来るだけ解消したい思いあります！

コンソール

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

起動時

DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNull' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTrue' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createArrayLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr

[taka10257]

以下が起動出来ることは確認しました！

• yarn build
• yarn test
• yarn storybook

多分大丈夫そう！

[kkeeth]

同じく各コマンドの実行ができることは確認しましたー．
警告内容のみですね！
あと，コンフリクトの解消もオネシャス！

[emrum01]

@taka10257 @kkeeth

#127 (comment)

typescript@4.9にstorybookfが対応していないので、今後のリリースを待つしかなさそうです。
typescriptのバージョンを下げることで対応しました！
また、コンフリクトも解消済みです！

storybookjs/storybook#19055

[taka10257]

@emrum01

typescriptのバージョンを下げることで対応しました！

このコミットが積まれてないかも

[emrum01]

忘れてました！ありがとうございます！pushしました

[taka10257]

@emrum01
storybookの実行時警告は解消されてるの確認しました！
ブラウザコンソールに出る以下の警告は、記述の問題っぽいですけど解消できそうでしょうか？

コンソール

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[emrum01]

@taka10257
storybook内部で使われているRootAPIの問題みたいだったのでstorybookのバージョンを上げることで対処しました！
storybookjs/storybook#18045
storybookjs/storybook#17831 (comment)
6.5.15がLTSとして今日リリースされてたのでタイミングよかったです！

[taka10257]

storybook内部で使われているRootAPIの問題みたいだったのでstorybookのバージョンを上げることで対処しました！

調査ありがとうございます！

[taka10257]

いろいろ調査して対応してくれてありがとうございます！