Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrate to storybook 7.0.0-beta #52

Merged

Conversation

natsuki-ornikar
Copy link
Contributor

@dannyhw This is a draft, but I'm almost done doing the migration for 7.0 beta.
I'm stuck on this issue when starting Webpack 5:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /addon-react-native-web/storybook-config-entry.js:
Property object of MemberExpression expected node to be of a type ["Expression"] but instead got "Identifier"

Do you have any idea of what this can be? I admit I'm bit lost 🤔

Ref issue: #47

@socket-security
Copy link

Socket Security Pull Request Report

Dependency issues detected. If you merge this pull request, you will not be alerted to the instances of these issues again.

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package Script field Source
[email protected] (upgraded) postinstall package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
[email protected] (upgraded) postinstall package.json via @storybook/[email protected]
[email protected] (added) postinstall package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
😵‍💫 Bin script confusion

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack

Consider removing one of the conflicting packages. Packages should only export bin scripts with their name

Package Bin script Source
@react-native-community/[email protected] (upgraded) react-native package.json via [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (upgraded) react-native package.json via [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (upgraded) semver package.json via @react-native-community/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
@storybook/[email protected] (added) sb package.json via [email protected]
[email protected] (added) sb package.json
[email protected] (upgraded) uglifyjs package.json via [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (upgraded) uglifyjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) jest package.json
[email protected] (upgraded) jest package.json via [email protected]
⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package Eval Type Location Source
@snyk/[email protected] (added) Function dist/graphlib.js package.json via [email protected]
@snyk/[email protected] (added) Function dist/graphlib.js package.json via [email protected]
@storybook/[email protected] (upgraded) Function dist/formatter-7QCQCGUB.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/formatter-GCLXO5IP.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/formatter-GCLXO5IP.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/chunk-JWOPKX5P.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/formatter-GCLXO5IP-SA57GC6A.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/formatter-GCLXO5IP-SA57GC6A.mjs package.json via [email protected]
@storybook/[email protected] (added) Function dist/runtime.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.mjs package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.mjs package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.mjs package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.mjs package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (added) Function dist/runtime.mjs package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/cjs/index.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/esm/index.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/modern/index.js package.json via @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/chunk-PQQMKLPK.mjs package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/utils.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/cjs/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@storybook/[email protected] (upgraded) Function dist/esm/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
@yarnpkg/[email protected] (added) Function index.js package.json via [email protected]
@yarnpkg/[email protected] (added) Function index.js package.json via [email protected]
[email protected] (added) Function dist/ajv.bundle.js package.json via @react-native-community/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (added) Function lib/compile/index.js package.json via @react-native-community/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (added) Function dist/compile/index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/compile/jtd/parse.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function js/release/call_get.js package.json via @storybook/[email protected]
[email protected] (added) Function js/release/call_get.js package.json via @storybook/[email protected]
[email protected] (added) Function js/release/join.js package.json via @storybook/[email protected]
[email protected] (added) Function js/release/join.js package.json via @storybook/[email protected]
[email protected] (added) Function js/release/join.js package.json via @storybook/[email protected]
[email protected] (added) Function js/release/promisify.js package.json via @storybook/[email protected]
[email protected] (upgraded) Function internals/async-iterator-prototype.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected]
[email protected] (upgraded) Function internals/async-iterator-prototype.js package.json via @storybook/[email protected]
[email protected] (upgraded) Function index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.min.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/ejs.min.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/lib/ejs.js package.json via [email protected]
[email protected] (added) Function ejs-v3.1.8/lib/ejs.js package.json via [email protected]
[email protected] (added) Function dist/envinfo.js package.json via [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (added) Function dist/envinfo.js package.json via [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
[email protected] (added) Function dist/node.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @react-native-community/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @react-native-community/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (added) Function index.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function build/index.js package.json via @types/[email protected]
[email protected] (upgraded) Function [build/utils.js](https://socke

@dannyhw
Copy link
Member

dannyhw commented Feb 2, 2023

@natsuki-ornikar thats a weird error, I'll try ask around

@dannyhw
Copy link
Member

dannyhw commented Feb 2, 2023

my suspicion is that it might be related to this

Babel mode v7:

Storybook now uses Babel mode v7 exclusively. In 6.x, Storybook provided its own babel settings out of the box. Now, Storybook's uses your project's babel settings (.babelrc, babel.config.js, etc.) instead.

In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory:

npx sb@next babelrc

maybe you can try running this command?

@natsuki-ornikar
Copy link
Contributor Author

@dannyhw Still facing the same issue. 😞

Asking @yannbf from storybookjs/addon-coverage if he had the same issue when migrating to 7.0 in storybookjs/addon-coverage#3.

My suspicion is that is related to the Webpack rules options for babel-loader but I don't find something relevant.

@dannyhw
Copy link
Member

dannyhw commented Feb 10, 2023

Looks like its working now, the chromatic preview is here https://618d44792e48fd003a482f88-ziyaduhujd.chromatic.com/?path=/docs/introduction--docs

@dannyhw dannyhw changed the base branch from main to next February 10, 2023 18:33
@dannyhw
Copy link
Member

dannyhw commented Feb 10, 2023

I'm going to merge this to a "next" branch where these changes can live until v7 is stable

@dannyhw dannyhw marked this pull request as ready for review February 10, 2023 18:33
@dannyhw dannyhw merged commit 91d6cea into storybookjs:next Feb 10, 2023
@dannyhw dannyhw mentioned this pull request Feb 12, 2023
@natsuki-ornikar natsuki-ornikar deleted the storybook_7.0.0-beta_migration branch February 13, 2023 10:30
@natsuki-ornikar
Copy link
Contributor Author

Si this so great, thank you @dannyhw :-)

dannyhw added a commit that referenced this pull request Mar 31, 2023
* migrate to storybook 7.0.0-beta (#52)

* chore(migration): migrate from storybook v6 to v7

* fix: format mdx file

* fix: add missing babel plugin

---------

authored-by: Arnaud Manaranche <[email protected]>

* trigger canary

* lock

* fix: remove unnecessary builder config from main.js (#54)

* update to rc version

* chore:  update package.json to remove unused/un-needed dependencies

* remove unused peerDeps, widen sb devDeps, fix start script

* simplify sb dev deps range

---------

Co-authored-by: Natalie Rouvière <[email protected]>
Co-authored-by: Michael Shilman <[email protected]>
Co-authored-by: Jeppe Reinhold <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants