diff --git a/MIGRATION.md b/MIGRATION.md
index 3e42324c8431..79150ff185a3 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -20,9 +20,9 @@
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
+ - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [Icons API changed](#icons-api-changed)
- ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations)
- - [Vue2 DOM structure changed](#vue2-dom-structure-changed)
- [Docs Changes](#docs-changes)
- [Standalone docs files](#standalone-docs-files)
- [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -530,6 +530,10 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard
It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.
+#### Removed STORYBOOK_REACT_CLASSES global
+
+This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`.
+
#### Icons API changed
For addon authors who use the `Icons` component, its API has been updated in Storybook 7.
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 67ae13da0740..b63a450177aa 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -76,6 +76,7 @@
"devDependencies": {
"@storybook/jest": "^0.0.10",
"@storybook/testing-library": "0.0.14-next.0",
+ "@types/node": "^14.14.20 || ^16.0.0",
"formik": "^2.2.9",
"typescript": "~4.6.3"
},
diff --git a/code/addons/interactions/src/preset/preview.ts b/code/addons/interactions/src/preset/preview.ts
index 6525e672a4d7..ac81f57af181 100644
--- a/code/addons/interactions/src/preset/preview.ts
+++ b/code/addons/interactions/src/preset/preview.ts
@@ -1,3 +1,5 @@
+///
+
import { addons } from '@storybook/addons';
import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
import type {
diff --git a/code/addons/storyshots/storyshots-core/src/api/index.ts b/code/addons/storyshots/storyshots-core/src/api/index.ts
index 7668c69fa993..232f929bf21f 100644
--- a/code/addons/storyshots/storyshots-core/src/api/index.ts
+++ b/code/addons/storyshots/storyshots-core/src/api/index.ts
@@ -7,7 +7,6 @@ import loadFramework from '../frameworks/frameworkLoader';
import { StoryshotsOptions } from './StoryshotsOptions';
const { describe, window: globalWindow } = global;
-global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
type TestMethod = 'beforeAll' | 'beforeEach' | 'afterEach' | 'afterAll';
const methods: TestMethod[] = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 6ae77192dbeb..bd6261935b6f 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -87,6 +87,7 @@
"@nrwl/workspace": "14.6.1",
"@types/autoprefixer": "^9.7.2",
"@types/tmp": "^0.2.3",
+ "@types/webpack-env": "^1.16.0",
"cross-spawn": "^7.0.3",
"jest": "^27.5.1",
"jest-preset-angular": "^12.0.0",
diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts
index f74d4e1b213b..7e79f3fd2fab 100644
--- a/code/frameworks/angular/src/client/index.ts
+++ b/code/frameworks/angular/src/client/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
index fac3ff0dfd89..45a98660effb 100644
--- a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts
@@ -786,7 +786,6 @@ const newWebpackConfiguration = (
devtool: 'cheap-module-source-map',
entry: [
'/Users/joe/storybook/lib/core-server/dist/esm/globals/polyfills.js',
- '/Users/joe/storybook/lib/core-server/dist/esm/globals/globals.js',
'/Users/joe/storybook/examples/angular-cli/.storybook/storybook-init-framework-entry.js',
'/Users/joe/storybook/addons/docs/dist/esm/frameworks/common/config.js-generated-other-entry.js',
'/Users/joe/storybook/addons/docs/dist/esm/frameworks/angular/config.js-generated-other-entry.js',
diff --git a/code/frameworks/ember/src/index.ts b/code/frameworks/ember/src/index.ts
index 9365b8c82146..482cff02a3c0 100644
--- a/code/frameworks/ember/src/index.ts
+++ b/code/frameworks/ember/src/index.ts
@@ -1,3 +1,5 @@
+///
+
export {
storiesOf,
setAddon,
diff --git a/code/lib/addons/src/main.ts b/code/lib/addons/src/main.ts
index 4c97ca06058d..ac37b2f2e060 100644
--- a/code/lib/addons/src/main.ts
+++ b/code/lib/addons/src/main.ts
@@ -1,4 +1,5 @@
import global from 'global';
+
import type { ReactElement } from 'react';
import { Channel } from '@storybook/channels';
import { SET_CONFIG } from '@storybook/core-events';
diff --git a/code/lib/addons/src/types.ts b/code/lib/addons/src/types.ts
index 6cb8f86f3aaf..d33d840bb535 100644
--- a/code/lib/addons/src/types.ts
+++ b/code/lib/addons/src/types.ts
@@ -197,7 +197,7 @@ export interface StoryApi {
}
export interface ClientStoryApi {
- storiesOf(kind: StoryKind, module: NodeModule): StoryApi;
+ storiesOf(kind: StoryKind, module: any): StoryApi;
addDecorator(decorator: DecoratorFunction): StoryApi;
addParameters(parameter: Parameters): StoryApi;
}
diff --git a/code/lib/api/package.json b/code/lib/api/package.json
index e81e11526a3d..089892c0e7f3 100644
--- a/code/lib/api/package.json
+++ b/code/lib/api/package.json
@@ -18,9 +18,22 @@
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
- "main": "dist/cjs/index.js",
- "module": "dist/esm/index.js",
- "types": "dist/types/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/index.js",
+ "import": "./dist/index.mjs",
+ "types": "./dist/index.d.ts"
+ },
+ "./shortcut": {
+ "require": "./dist/shortcut.js",
+ "import": "./dist/shortcut.mjs",
+ "types": "./dist/shortcut.d.ts"
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
"files": [
"dist/**/*",
"README.md",
@@ -29,7 +42,7 @@
],
"scripts": {
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
- "prep": "node ../../../scripts/prepare.js"
+ "prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/channels": "7.0.0-alpha.34",
@@ -64,5 +77,11 @@
"publishConfig": {
"access": "public"
},
+ "bundler": {
+ "entries": [
+ "./src/index.tsx",
+ "./src/shortcut.ts"
+ ]
+ },
"gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
}
diff --git a/code/lib/api/shortcut.js b/code/lib/api/shortcut.js
index f3bdc238133b..9fb9988699cd 100644
--- a/code/lib/api/shortcut.js
+++ b/code/lib/api/shortcut.js
@@ -1 +1 @@
-export * from './dist/esm/lib/shortcut';
+export * from './dist/shortcut';
diff --git a/code/lib/api/src/shortcut.ts b/code/lib/api/src/shortcut.ts
new file mode 100644
index 000000000000..a39e27fdba53
--- /dev/null
+++ b/code/lib/api/src/shortcut.ts
@@ -0,0 +1 @@
+export * from './lib/shortcut';
diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json
index 30ec867c510a..a5a9c5e7f22a 100644
--- a/code/lib/client-api/package.json
+++ b/code/lib/client-api/package.json
@@ -20,9 +20,17 @@
},
"license": "MIT",
"sideEffects": false,
- "main": "dist/cjs/index.js",
- "module": "dist/esm/index.js",
- "types": "dist/types/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/index.js",
+ "import": "./dist/index.mjs",
+ "types": "./dist/index.d.ts"
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
"files": [
"dist/**/*",
"README.md",
@@ -31,7 +39,7 @@
],
"scripts": {
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
- "prep": "node ../../../scripts/prepare.js"
+ "prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.34",
@@ -57,5 +65,10 @@
"publishConfig": {
"access": "public"
},
+ "bundler": {
+ "entries": [
+ "./src/index.ts"
+ ]
+ },
"gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
}
diff --git a/code/lib/client-api/src/index.ts b/code/lib/client-api/src/index.ts
index 9ac279239c2d..5a999fb16188 100644
--- a/code/lib/client-api/src/index.ts
+++ b/code/lib/client-api/src/index.ts
@@ -11,6 +11,8 @@ import {
setGlobalRender,
} from './ClientApi';
+export type { GetStorybookKind, GetStorybookStory } from './ClientApi';
+
export * from './types';
export * from './queryparams';
diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json
index bb8fe5c1b175..d57032c4c590 100644
--- a/code/lib/core-client/package.json
+++ b/code/lib/core-client/package.json
@@ -19,19 +19,20 @@
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
- "main": "dist/cjs/index.js",
- "module": "dist/esm/index.js",
- "types": "dist/types/index.d.ts",
- "files": [
- "dist/**/*",
- "dll/**/*",
- "types/**/*",
- "*.js",
- "*.d.ts"
- ],
+ "exports": {
+ ".": {
+ "require": "./dist/index.js",
+ "import": "./dist/index.mjs",
+ "types": "./dist/index.d.ts"
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
"scripts": {
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
- "prep": "node ../../../scripts/prepare.js"
+ "prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/addons": "7.0.0-alpha.34",
@@ -59,5 +60,10 @@
"publishConfig": {
"access": "public"
},
+ "bundler": {
+ "entries": [
+ "./src/index.ts"
+ ]
+ },
"gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
}
diff --git a/code/lib/core-client/src/globals/globals.ts b/code/lib/core-client/src/globals/globals.ts
deleted file mode 100644
index 0375e3f37a9a..000000000000
--- a/code/lib/core-client/src/globals/globals.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import global from 'global';
-
-const { window: globalWindow } = global;
-
-globalWindow.STORYBOOK_REACT_CLASSES = {};
diff --git a/code/lib/core-client/src/preview/executeLoadable.ts b/code/lib/core-client/src/preview/executeLoadable.ts
index 2261190cb4b3..05ab5cfdb464 100644
--- a/code/lib/core-client/src/preview/executeLoadable.ts
+++ b/code/lib/core-client/src/preview/executeLoadable.ts
@@ -1,3 +1,6 @@
+///
+///
+
import { logger } from '@storybook/client-logger';
import { Path, ModuleExports } from '@storybook/store';
import { Loadable, RequireContext, LoaderFunction } from './types';
diff --git a/code/lib/core-client/src/preview/start.ts b/code/lib/core-client/src/preview/start.ts
index 5cd2463ceefb..c8b20f1a55d9 100644
--- a/code/lib/core-client/src/preview/start.ts
+++ b/code/lib/core-client/src/preview/start.ts
@@ -5,7 +5,7 @@ import { PreviewWeb } from '@storybook/preview-web';
import type { AnyFramework, ArgsStoryFn } from '@storybook/csf';
import { createChannel } from '@storybook/channel-postmessage';
import { addons } from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { FORCE_RE_RENDER } from '@storybook/core-events';
import type { Path, WebProjectAnnotations } from '@storybook/store';
import { Loadable } from './types';
@@ -24,16 +24,45 @@ const removedApi = (name: string) => () => {
throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
};
+interface RendererImplementation {
+ decorateStory?: WebProjectAnnotations['applyDecorators'];
+ render?: ArgsStoryFn;
+}
+
+interface ClientAPIFacade {
+ /* deprecated */
+ addDecorator: (...args: any[]) => never;
+ /* deprecated */
+ addParameters: (...args: any[]) => never;
+ /* deprecated */
+ clearDecorators: (...args: any[]) => never;
+ /* deprecated */
+ addLoader: (...args: any[]) => never;
+ /* deprecated */
+ setAddon: (...args: any[]) => never;
+ /* deprecated */
+ getStorybook: (...args: any[]) => never;
+ /* deprecated */
+ storiesOf: (...args: any[]) => never;
+ /* deprecated */
+ raw: (...args: any[]) => never;
+}
+
+interface StartReturnValue {
+ /* deprecated */
+ forceReRender: () => void;
+ /* deprecated */
+ getStorybook: any;
+ /* deprecated */
+ configure: any;
+ /* deprecated */
+ clientApi: ClientApi | ClientAPIFacade;
+}
+
export function start(
renderToDOM: WebProjectAnnotations['renderToDOM'],
- {
- decorateStory,
- render,
- }: {
- decorateStory?: WebProjectAnnotations['applyDecorators'];
- render?: ArgsStoryFn;
- } = {}
-) {
+ { decorateStory, render }: RendererImplementation = {}
+): StartReturnValue {
if (globalWindow) {
// To enable user code to detect if it is running in Storybook
globalWindow.IS_STORYBOOK = true;
@@ -84,9 +113,8 @@ export function start(
}
return {
- forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+ forceReRender: () => channel.emit(FORCE_RE_RENDER),
getStorybook: (): void[] => [],
- raw: (): void => {},
clientApi,
// This gets called each time the user calls configure (i.e. once per HMR)
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index daefd2030a70..9e51296c4fc2 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -93,7 +93,7 @@ export const previewAnnotations = async (base: any, options: Options) => {
if (config.length > 0) warnConfigField();
- return [...config, require.resolve('@storybook/core-client/dist/esm/globals/globals'), ...base];
+ return [...config, ...base];
};
export const features = async (
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index 424b2f2aebf6..dd1878ded641 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -20,9 +20,17 @@
},
"license": "MIT",
"sideEffects": false,
- "main": "dist/cjs/index.js",
- "module": "dist/esm/index.js",
- "types": "dist/types/index.d.ts",
+ "exports": {
+ ".": {
+ "require": "./dist/index.js",
+ "import": "./dist/index.mjs",
+ "types": "./dist/index.d.ts"
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
"files": [
"dist/**/*",
"README.md",
@@ -31,7 +39,7 @@
],
"scripts": {
"check": "../../../scripts/node_modules/.bin/tsc --noEmit",
- "prep": "node ../../../scripts/prepare.js"
+ "prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@storybook/client-logger": "7.0.0-alpha.34",
@@ -50,5 +58,11 @@
"publishConfig": {
"access": "public"
},
+ "bundler": {
+ "entries": [
+ "./src/index.ts"
+ ],
+ "platform": "node"
+ },
"gitHead": "fc90fc875462421c1faa35862ac4bc436de8e75f"
}
diff --git a/code/lib/ui/src/containers/notifications.tsx b/code/lib/ui/src/containers/notifications.tsx
index ac2b3c69c6f7..32b17bf9d9d6 100644
--- a/code/lib/ui/src/containers/notifications.tsx
+++ b/code/lib/ui/src/containers/notifications.tsx
@@ -1,16 +1,14 @@
import React, { FC } from 'react';
-import { Consumer, Combo, useStorybookApi } from '@storybook/api';
+import type { Combo } from '@storybook/api';
+import { Consumer } from '@storybook/api';
import NotificationList from '../components/notifications/NotificationList';
-export const mapper = ({ state }: Combo) => {
- const { clearNotification } = useStorybookApi();
- const { notifications } = state;
-
+const mapper = ({ state, api }: Combo) => {
return {
- notifications,
- clearNotification,
+ notifications: state.notifications,
+ clearNotification: api.clearNotification,
};
};
diff --git a/code/lib/ui/src/index.tsx b/code/lib/ui/src/index.tsx
index 5da1ffea94dd..28cdda83dac3 100644
--- a/code/lib/ui/src/index.tsx
+++ b/code/lib/ui/src/index.tsx
@@ -1,6 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-///
-
import global from 'global';
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
@@ -28,21 +25,19 @@ ThemeProvider.displayName = 'ThemeProvider';
// @ts-expect-error (Converted from ts-ignore)
HelmetProvider.displayName = 'HelmetProvider';
-const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
-
export interface RootProps {
provider: Provider;
history?: History;
}
export const Root: FC = ({ provider }) => (
-
+
-
+
);
const Main: FC<{ provider: Provider }> = ({ provider }) => {
diff --git a/code/package.json b/code/package.json
index 065164eb7861..986ffde67c5e 100644
--- a/code/package.json
+++ b/code/package.json
@@ -422,6 +422,10 @@
"maintenance",
"Maintenance"
],
+ [
+ "build",
+ "Build"
+ ],
[
"dependencies",
"Dependency Upgrades"
diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
index 0a4afb50fbe3..553dd6098728 100644
--- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
+++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts
@@ -33,14 +33,7 @@ describe('framework-preset-react-docgen', () => {
overrides: [
{
test: /\.(cjs|mjs|tsx?|jsx?)$/,
- plugins: [
- [
- babelPluginReactDocgenPath,
- {
- DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
- },
- ],
- ],
+ plugins: [[babelPluginReactDocgenPath]],
},
],
});
diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts
index f02de5cf515b..b08a3e427d4f 100644
--- a/code/presets/react-webpack/src/framework-preset-react-docs.ts
+++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts
@@ -23,14 +23,7 @@ export const babel: StorybookConfig['babel'] = async (config, options) => {
...(config?.overrides || []),
{
test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
- plugins: [
- [
- require.resolve('babel-plugin-react-docgen'),
- {
- DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
- },
- ],
- ],
+ plugins: [[require.resolve('babel-plugin-react-docgen')]],
},
],
};
diff --git a/code/renderers/html/src/index.ts b/code/renderers/html/src/index.ts
index 6f07e864d3e9..9d5afe665e9a 100644
--- a/code/renderers/html/src/index.ts
+++ b/code/renderers/html/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/preact/src/index.ts b/code/renderers/preact/src/index.ts
index 731b8a9a1588..32a6b0b3ee94 100644
--- a/code/renderers/preact/src/index.ts
+++ b/code/renderers/preact/src/index.ts
@@ -1,3 +1,5 @@
+///
+
export * from './globals';
export * from './public-api';
diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts
index a1da39cc147e..68dae468dcc1 100644
--- a/code/renderers/react/src/index.ts
+++ b/code/renderers/react/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/server/src/index.ts b/code/renderers/server/src/index.ts
index 6f07e864d3e9..9d5afe665e9a 100644
--- a/code/renderers/server/src/index.ts
+++ b/code/renderers/server/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/svelte/src/index.ts b/code/renderers/svelte/src/index.ts
index 6f07e864d3e9..9d5afe665e9a 100644
--- a/code/renderers/svelte/src/index.ts
+++ b/code/renderers/svelte/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/vue/src/globals.ts b/code/renderers/vue/src/globals.ts
index e80d65427f47..2fec84f69602 100644
--- a/code/renderers/vue/src/globals.ts
+++ b/code/renderers/vue/src/globals.ts
@@ -3,5 +3,4 @@ import global from 'global';
const { window: globalWindow } = global;
-globalWindow.STORYBOOK_REACT_CLASSES = {};
globalWindow.STORYBOOK_ENV = 'vue';
diff --git a/code/renderers/vue/src/index.ts b/code/renderers/vue/src/index.ts
index 6f07e864d3e9..9d5afe665e9a 100644
--- a/code/renderers/vue/src/index.ts
+++ b/code/renderers/vue/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/vue3/src/globals.ts b/code/renderers/vue3/src/globals.ts
index ab2c948bafd1..5a17ebf65326 100644
--- a/code/renderers/vue3/src/globals.ts
+++ b/code/renderers/vue3/src/globals.ts
@@ -3,5 +3,4 @@ import global from 'global';
const { window: globalWindow } = global;
-globalWindow.STORYBOOK_REACT_CLASSES = {};
globalWindow.STORYBOOK_ENV = 'vue3';
diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts
index 6f07e864d3e9..9d5afe665e9a 100644
--- a/code/renderers/vue3/src/index.ts
+++ b/code/renderers/vue3/src/index.ts
@@ -1,3 +1,5 @@
+///
+
import './globals';
export * from './public-api';
diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts
index e0a88fea3b48..699b1638bb3f 100644
--- a/code/renderers/web-components/src/index.ts
+++ b/code/renderers/web-components/src/index.ts
@@ -1,3 +1,5 @@
+///
+
// @ts-expect-error (Converted from ts-ignore)
import global from 'global';
diff --git a/code/yarn.lock b/code/yarn.lock
index 6d695addd6b1..6449f6e663bb 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6748,6 +6748,7 @@ __metadata:
"@storybook/jest": ^0.0.10
"@storybook/testing-library": 0.0.14-next.0
"@storybook/theming": 7.0.0-alpha.34
+ "@types/node": ^14.14.20 || ^16.0.0
formik: ^2.2.9
global: ^4.4.0
jest-mock: ^27.0.6
@@ -7149,6 +7150,7 @@ __metadata:
"@types/react": ^16.14.23
"@types/react-dom": ^16.9.14
"@types/tmp": ^0.2.3
+ "@types/webpack-env": ^1.16.0
autoprefixer: ^9.8.6
core-js: ^3.8.2
cross-spawn: ^7.0.3
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 8c5fe9ae609d..e1fb0bed0825 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -27,7 +27,7 @@ Storybook needs to be installed into a project that is already set up with a fra
- 📦 [Create an Angular Workspace](https://angular.io/cli/new)
- 📦 [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)
-- 📦 [Vue CLI](https://cli.vuejs.org/)
+- 📦 [Create a Vue App](https://vuejs.org/guide/quick-start.html)
- 📦 [Ember CLI](https://guides.emberjs.com/release/getting-started/quick-start/)
- Or any other tooling available.