Skip to content

Commit

Permalink
docs: move babel v7 section to webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
yannbf committed Mar 1, 2023
1 parent 7815aa0 commit e297d8d
Showing 1 changed file with 18 additions and 15 deletions.
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

0 comments on commit e297d8d

Please sign in to comment.