chore: Upgrade Storybook from 6.4.20 to 6.5.9 #120

filipewl · 2022-06-14T17:51:26Z

What's the purpose of this pull request?

Upgrade Storybook to keep it up to date.

How does it work?

Just ran the recommended command npx sb upgrade.

Output for this command:

WARN Found 23 outdated packages (relative to '@storybook/[email protected]')
WARN Please make sure your packages are updated to ensure a consistent experience.
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
WARN - @storybook/[email protected]
🔎 checking possible migrations..

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

Found builder webpack5, skipping
Unable to find .eslintrc config file, skipping

✅ migration check successfully ran

exec: 4:27.921 (m:ss.mmm)
remove temp package: 7.008s
ypx: 6:18.097 (m:ss.mmm)

How to test it?

Test the Storybook deploy preview link.

References

Storybook's CHANGELOG.

vercel · 2022-06-14T17:51:29Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nextjs-store-storybook	✅ Ready (Inspect)	Visit Preview	Jun 14, 2022 at 5:56PM (UTC)

vtex-sites · 2022-06-14T17:51:58Z

Preview is ready

This pull request generated a Preview

👀 Preview: https://sfj-bdc878f--nextjs.preview.vtex.app
🔬 Go deeper by inspecting the Build Logs
📝 based on commit bdc878f

vtex-sites · 2022-06-14T18:01:05Z

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit bdc878f

Lighthouse Report by page
📎 /
📎 /apple-magic-mouse/p
📎 /office

Please see vtex-sites/nextjs.store#120. Differently from the NextJS's version, after the automatic upgrade, the `build-storybook` command failed: ``` info => Using default Webpack5 setup 92% sealing asset processing TerserPlugininfo => Manager built (1 min) ERR! => Failed to build the preview ERR! Module parse failed: Unexpected token (26:4) ERR! You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ERR! | ERR! | return ( ERR! > <React.Fragment> ERR! | {finalData && render(finalData)} ERR! | {!finalData && <div>Loading (StaticQuery)</div>} ERR! Error: => Webpack failed, learn more with --debug-webpack ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:234:62 ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/HookWebpackError.js:68:3 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at Cache.shutdown (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Cache.js:150:23) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1225:15 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at Compiler.close (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1218:23) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:233:20 ERR! at finalCallback (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:441:32) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:458:13 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at onCompiled (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:456:21) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1196:17 ERR! Error: => Webpack failed, learn more with --debug-webpack ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:234:62 ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/HookWebpackError.js:68:3 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at Cache.shutdown (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Cache.js:150:23) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1225:15 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at Compiler.close (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1218:23) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:233:20 ERR! at finalCallback (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:441:32) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:458:13 ERR! at Hook.eval [as callAsync] (eval at create (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1) ERR! at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/filipewl/Workspace/gatsby.store/node_modules/tapable/lib/Hook.js:18:14) ERR! at onCompiled (/Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:456:21) ERR! at /Users/filipewl/Workspace/gatsby.store/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1196:17 info => Loading presets error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ``` I didn't fully understand the error, but after [applying](b65baa1) [this **Manual configuration**](https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/#manual-configuration) from Gatsby's Documentation, the build worked. The specific line to transpile Gatsby module did the trick. I included the `babel-plugin-remove-graphql-queries` to prevent future errors.

chore: Upgrade Storybook from 6.4.20 to 6.5.9

5963d19

filipewl added the Chore General tasks. label Jun 14, 2022

filipewl self-assigned this Jun 14, 2022

filipewl marked this pull request as ready for review June 14, 2022 17:53

Add the entry to the change log

bdc878f

vercel bot temporarily deployed to preview June 14, 2022 17:56 Inactive

danzanzini approved these changes Jun 14, 2022

View reviewed changes

eduardoformiga approved these changes Jun 14, 2022

View reviewed changes

filipewl merged commit 90fb0bd into main Jun 14, 2022

filipewl deleted the chore/storybook-upgrade-659 branch June 14, 2022 19:56

filipewl mentioned this pull request Jun 14, 2022

chore: Upgrade Storybook from 6.4.20 to 6.5.9 vtex-sites/gatsby.store#109

Merged

anahernandes-vtex unassigned filipewl Dec 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Upgrade Storybook from 6.4.20 to 6.5.9 #120

chore: Upgrade Storybook from 6.4.20 to 6.5.9 #120

filipewl commented Jun 14, 2022 •

edited

Loading

vercel bot commented Jun 14, 2022 •

edited

Loading

vtex-sites bot commented Jun 14, 2022 •

edited

Loading

vtex-sites bot commented Jun 14, 2022

chore: Upgrade Storybook from 6.4.20 to 6.5.9 #120

chore: Upgrade Storybook from 6.4.20 to 6.5.9 #120

Conversation

filipewl commented Jun 14, 2022 • edited Loading

What's the purpose of this pull request?

How does it work?

How to test it?

References

vercel bot commented Jun 14, 2022 • edited Loading

vtex-sites bot commented Jun 14, 2022 • edited Loading

Preview is ready

This pull request generated a Preview

vtex-sites bot commented Jun 14, 2022

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

filipewl commented Jun 14, 2022 •

edited

Loading

vercel bot commented Jun 14, 2022 •

edited

Loading

vtex-sites bot commented Jun 14, 2022 •

edited

Loading