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

Documentation: Add clarification note in babel v7 migration docs #21309

Merged
merged 1 commit into from
Mar 2, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 18 additions & 15 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
- [Change of root html IDs](#change-of-root-html-ids)
- [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
- [Add strict mode](#add-strict-mode)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
- [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed)
- [7.0 Core changes](#70-core-changes)
- [7.0 feature flags removed](#70-feature-flags-removed)
Expand All @@ -34,6 +33,7 @@
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
- [Postcss removed](#postcss-removed)
- [Removed DLL flags](#removed-dll-flags)
- [7.0 Framework-specific changes](#70-framework-specific-changes)
Expand Down Expand Up @@ -761,20 +761,6 @@ Starting in 7.0, Storybook's build tools add [`"use strict"`](https://developer.

If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behavior, it will need to be updated. As a workaround, it is sometimes possible to move the sloppy mode code inside a script tag in `.storybook/preview-head.html`.

#### Babel mode v7 exclusively

_Has automigration_

Storybook now uses [Babel mode v7](#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:

```sh
npx sb@next babelrc
```

This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.

#### Importing plain markdown files with `transcludeMarkdown` has changed

The `transcludeMarkdown` option in `addon-docs` have been removed, and the automatic handling of `.md` files in Vite projects have also been disabled.
Expand Down Expand Up @@ -899,6 +885,23 @@ To upgrade:

During the 7.0 dev cycle we will be updating this section with useful resources as we run across them.

#### Babel mode v7 exclusively

_Has automigration_

Storybook now uses [Babel mode v7](#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.

> Note:
> If you are using @storybook/react-webpack5 with the @storybook/preset-create-react-app package, you don't need to do anything. The preset already provides the babel configuration you need.

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

```sh
npx storybook@next babelrc
```

This command will create a `.babelrc.json` file in your project, containing a few babel plugins which will be installed as dev dependencies.

#### Postcss removed

Storybook 6.x installed postcss by default. In 7.0 built-in support has been removed for Webpack-based frameworks. If you need it, you can add it back using [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss).
Expand Down