Merge pull request #20110 from storybookjs/tech/peer-dep-attempt

Fix peer dependencies for npm8/pnpm/yarn pnp - retry
storybookjs · Dec 6, 2022 · 19eb636 · 19eb636
2 parents c74279a + 5734438
commit 19eb636
Show file tree

Hide file tree

Showing 45 changed files with 312 additions and 270 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -3,6 +3,7 @@
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [Alpha release notes](#alpha-release-notes)
   - [7.0 breaking changes](#70-breaking-changes)
+    - [React peer dependencies required](#react-peer-dependencies-required)
     - [Postcss removed](#postcss-removed)
     - [Vue3 replaced app export with setup](#vue3-replaced-app-export-with-setup)
     - [removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
@@ -264,6 +265,17 @@ In the meantime, these migration notes are the best available documentation on t
 
 ### 7.0 breaking changes
 
+#### React peer dependencies required
+
+Starting in 7.0, `react` and `react-dom` are now required peer dependencies of Storybook.
+
+Storybook uses `react` in a variety of packages. In the past, we've done various trickery hide this from non-React users. However, with stricter peer dependency handling by `npm8`, `npm`, and `yarn pnp` those tricks have started to cause problems for those users. Rather than resorting to even more complicated tricks, we are making `react` and `react-dom` required peer dependencies.
+
+To upgrade manually, add any version of `react` and `react-dom` as devDependencies using your package manager of choice, e.g.
+
+```
+npm add react react-dom --dev
+```
 #### Postcss removed
 
 Storybook 6.x installed postcss by default. In 7.0 built-in support has been removed. IF you need it, you can add it back using [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss).

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -51,6 +51,16 @@
       "import": "./dist/preset.mjs",
       "types": "./dist/preset.d.ts"
     },
+    "./dist/shims/mdx-react-shim": {
+      "require": "./dist/shims/mdx-react-shim.js",
+      "import": "./dist/shims/mdx-react-shim.mjs",
+      "types": "./dist/shims/mdx-react-shim.d.ts"
+    },
+    "./mdx-react-shim": {
+      "require": "./dist/shims/mdx-react-shim.js",
+      "import": "./dist/shims/mdx-react-shim.mjs",
+      "types": "./dist/shims/mdx-react-shim.d.ts"
+    },
     "./svelte/HOC.svelte": "./svelte/HOC.svelte",
     "./ember": "./ember/index.js",
     "./ember/index.js": "./ember/index.js",
@@ -85,6 +95,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/core": "^7.20.2",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@jest/transform": "^29.3.1",
     "@mdx-js/react": "^2.1.5",
@@ -105,29 +116,23 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.8.0",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
     "entries": [
       "./src/index.ts",
       "./src/preset.ts",
-      "./src/preview.ts"
+      "./src/preview.ts",
+      "./src/shims/mdx-react-shim.ts"
     ]
   },
   "gitHead": "8d3068344b96cb740635b6fbb7a9052108a984bc",

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -65,11 +65,13 @@ async function webpack(
     transcludeMarkdown = false,
   } = options;
 
-  const mdxLoaderOptions = {
-    // whether to skip storybook files, useful for docs only mdx or md files
+  const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
     skipCsf: true,
-    remarkPlugins: [remarkSlug, remarkExternalLinks],
-  };
+    mdxCompileOptions: {
+      providerImportSource: '@storybook/addon-docs/mdx-react-shim',
+      remarkPlugins: [remarkSlug, remarkExternalLinks],
+    },
+  });
 
   if (sourceLoaderOptions) {
     throw new Error(dedent`

diff --git a/code/addons/docs/src/shims/mdx-react-shim.ts b/code/addons/docs/src/shims/mdx-react-shim.ts
@@ -0,0 +1 @@
+export * from '@mdx-js/react';
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
@@ -62,6 +62,11 @@
       "import": "./dist/docs/preset.mjs",
       "types": "./dist/docs/preset.d.ts"
     },
+    "./docs/mdx-react-shim": {
+      "require": "./dist/docs/mdx-react-shim.js",
+      "import": "./dist/docs/mdx-react-shim.mjs",
+      "types": "./dist/docs/mdx-react-shim.d.ts"
+    },
     "./highlight/preview": {
       "require": "./dist/highlight/preview.js",
       "import": "./dist/highlight/preview.mjs",
@@ -127,12 +132,12 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
     "@storybook/vue": "7.0.0-alpha.59",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
-    "@babel/core": "^7.9.6"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -147,6 +152,7 @@
       "./src/controls/manager.ts",
       "./src/docs/preview.ts",
       "./src/docs/preset.ts",
+      "./src/docs/mdx-react-shim.ts",
       "./src/highlight/preview.ts",
       "./src/measure/preview.ts",
       "./src/measure/manager.ts",

diff --git a/code/addons/essentials/src/docs/mdx-react-shim.ts b/code/addons/essentials/src/docs/mdx-react-shim.ts
@@ -0,0 +1 @@
+export * from '@storybook/addon-docs/dist/shims/mdx-react-shim';
diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts
@@ -1,2 +1,8 @@
 /* eslint-disable import/export */
 export * from '@storybook/addon-docs/dist/preset';
+
+export const mdxLoaderOptions = async (config: any) => {
+  // eslint-disable-next-line no-param-reassign
+  config.mdxCompileOptions.providerImportSource = '@storybook/addon-essentials/docs/mdx-react-shim';
+  return config;
+};
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -71,7 +71,6 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/client-logger": "7.0.0-alpha.59",
     "@storybook/components": "7.0.0-alpha.59",
     "@storybook/core-common": "7.0.0-alpha.59",
@@ -87,6 +86,7 @@
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
+    "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
     "@types/node": "^16.0.0",

diff --git a/code/addons/interactions/src/components/MethodCall.tsx b/code/addons/interactions/src/components/MethodCall.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { ObjectInspector } from '@devtools-ds/object-inspector';
 import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
 import { useTheme } from '@storybook/theming';

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -54,8 +54,6 @@
     "core-js": "^3.8.2",
     "find-up": "^5.0.0",
     "global": "^4.4.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.7",
     "telejson": "^7.0.3",
@@ -103,6 +101,8 @@
     "@angular/platform-browser-dynamic": ">=13.0.0",
     "@babel/core": "*",
     "@nrwl/workspace": "14.6.1",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0",
     "zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0"

diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
@@ -37,8 +37,6 @@
     "@storybook/preview-api": "7.0.0-alpha.59",
     "@storybook/types": "7.0.0-alpha.59",
     "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
     "read-pkg-up": "^7.0.1",
     "ts-dedent": "^2.0.0"
   },
@@ -51,7 +49,9 @@
     "@types/ember__component": "4.0.8",
     "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
     "babel-plugin-htmlbars-inline-precompile": "2 || 3",
-    "ember-source": "~3.28.1"
+    "ember-source": "~3.28.1",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=10.13.0"

diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
@@ -55,15 +55,15 @@
     "@storybook/html": "7.0.0-alpha.59",
     "@storybook/preset-html-webpack": "7.0.0-alpha.59",
     "@types/node": "^16.0.0",
-    "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "global": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "@babel/core": "*"
+    "@babel/core": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=10.13.0"

diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
@@ -54,17 +54,17 @@
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preact": "7.0.0-alpha.59",
     "@storybook/preset-preact-webpack": "7.0.0-alpha.59",
-    "@types/node": "^16.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "preact": "^10.5.13",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "@babel/core": "*",
-    "preact": "^8.0.0||^10.0.0"
+    "preact": "^8.0.0||^10.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=10.13.0"

diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
@@ -54,13 +54,15 @@
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preset-server-webpack": "7.0.0-alpha.59",
     "@storybook/server": "7.0.0-alpha.59",
-    "@types/node": "^16.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "engines": {
     "node": ">=10.13.0"
   },

diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
@@ -67,7 +67,9 @@
     "vite": "^3.1.3"
   },
   "peerDependencies": {
-    "@storybook/addon-svelte-csf": "^2.0.0"
+    "@storybook/addon-svelte-csf": "^2.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@storybook/addon-svelte-csf": {

diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
@@ -54,9 +54,7 @@
     "@storybook/builder-webpack5": "7.0.0-alpha.59",
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preset-svelte-webpack": "7.0.0-alpha.59",
-    "@storybook/svelte": "7.0.0-alpha.59",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@storybook/svelte": "7.0.0-alpha.59"
   },
   "devDependencies": {
     "svelte": "^3.48.0",
@@ -65,6 +63,8 @@
   },
   "peerDependencies": {
     "@babel/core": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "svelte": "^3.48.0",
     "svelte-loader": "*"
   },

diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
@@ -63,6 +63,8 @@
     "vue": "^2.7.10"
   },
   "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "vue": "^2.7.0"
   },
   "engines": {

diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
@@ -54,9 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preset-vue-webpack": "7.0.0-alpha.59",
     "@storybook/vue": "7.0.0-alpha.59",
-    "@types/node": "^16.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "typescript": "~4.9.3",
@@ -68,6 +66,8 @@
     "@babel/core": "*",
     "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "css-loader": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "vue": "^2.6.8",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.8"

diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
@@ -64,6 +64,10 @@
     "typescript": "~4.9.3",
     "vite": "^3.1.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "engines": {
     "node": "^14.18 || >=16"
   },

diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
@@ -54,9 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preset-vue3-webpack": "7.0.0-alpha.59",
     "@storybook/vue3": "7.0.0-alpha.59",
-    "@types/node": "^16.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "3.0.0",
@@ -67,6 +65,8 @@
     "@babel/core": "*",
     "@vue/compiler-sfc": "^3.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "vue": "^3.0.0"
   },
   "engines": {

diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
@@ -63,6 +63,10 @@
     "typescript": "~4.9.3",
     "vite": "^3.1.0"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
   "engines": {
     "node": "^14.18 || >=16"
   },

diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
@@ -57,16 +57,16 @@
     "@storybook/core-common": "7.0.0-alpha.59",
     "@storybook/preset-web-components-webpack": "7.0.0-alpha.59",
     "@storybook/web-components": "7.0.0-alpha.59",
-    "@types/node": "^16.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "lit-html": "2.0.2",
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "lit-html": "^1.4.1 || ^2.0.0"
+    "lit-html": "^1.4.1 || ^2.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=10.13.0"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from '@storybook/addon-docs/dist/shims/mdx-react-shim';