Merge pull request #14689 from storybookjs/rework-and-clean-deps

Docs: Remove `babel-loader` and `@babel/core` peer deps

addons/docs/README.md

@@ -103,10 +103,10 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs
 ```
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then add the following to your `.storybook/main.js`:
@@ -183,7 +183,8 @@ module.exports = {
       test: /\.(stories|story)\.mdx$/,
       use: [
         {
-          loader: 'babel-loader',
+          // Need to add babel-loader as dependency: `yarn add -D babel-loader`
+          loader: require.resolve('babel-loader'),
           // may or may not need this line depending on your app's setup
           options: {
             plugins: ['@babel/plugin-transform-react-jsx'],

addons/docs/angular/README.md

@@ -96,10 +96,10 @@ storiesOf('App Component', module)
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then update your `.storybook/main.js` to make sure you load MDX files:

addons/docs/common/README.md

@@ -34,10 +34,10 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then update your `.storybook/main.js` to make sure you load MDX files:

addons/docs/ember/README.md

@@ -78,10 +78,10 @@ storiesOf('App Component', module)
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then update your `.storybook/main.js` to make sure you load MDX files:

addons/docs/package.json

@@ -134,12 +134,10 @@
     "zone.js": "^0.11.3"
   },
   "peerDependencies": {
-    "@babel/core": "^7.11.5",
     "@storybook/angular": "6.3.0-alpha.13",
     "@storybook/vue": "6.3.0-alpha.13",
     "@storybook/vue3": "6.3.0-alpha.13",
     "@storybook/web-components": "6.3.0-alpha.13",
-    "babel-loader": "^8.0.0",
     "lit-html": "^1.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",

addons/docs/react/README.md

@@ -67,12 +67,6 @@ storiesOf('InfoButton', module)
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
-
-```sh
-yarn add -D react babel-loader
-```
-
 Then update your `.storybook/main.js` to make sure you load MDX files:
 
 ```js

addons/docs/vue/README.md

@@ -93,10 +93,10 @@ storiesOf('InfoButton', module)
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then update your `.storybook/main.js` to make sure you load MDX files:

addons/docs/vue3/README.md

@@ -93,10 +93,10 @@ storiesOf('InfoButton', module)
 
 [MDX](../docs/mdx.md) is a convenient way to document your components in Markdown and embed documentation components, such as stories and props tables, inline.
 
-Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you'll need to add these dependencies as well:
+Docs has peer dependencies on `react`. If you want to write stories in MDX, you may need to add this dependency as well:
 
 ```sh
-yarn add -D react babel-loader
+yarn add -D react
 ```
 
 Then update your `.storybook/main.js` to make sure you load MDX files:

yarn.lock

@@ -6018,12 +6018,10 @@ __metadata:
     webpack: 4
     zone.js: ^0.11.3
   peerDependencies:
-    "@babel/core": ^7.11.5
     "@storybook/angular": 6.3.0-alpha.13
     "@storybook/vue": 6.3.0-alpha.13
     "@storybook/vue3": 6.3.0-alpha.13
     "@storybook/web-components": 6.3.0-alpha.13
-    babel-loader: ^8.0.0
     lit-html: ^1.0.0
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0