📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

I just tried to run storybook with a Vue3 (beta) app and got some errors… A few I was able to work-around merging our Webpack config and pushing the Vue3 loader plugin:

const wltConfig = require('../apps/webpack-dev');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
	stories: ['../**/*.stories.[tj]s'],

	webpackFinal: (config, ...args) => {
		config.plugins.push(new VueLoaderPlugin());
		return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
	}
};

I still get a warning and an error in the shell:

WARN   Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'

– nevertheless storybook builds and opens the browser. There I am stuck with this error message:

Uncaught TypeError: _vue.default is not a constructor
    at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.<anonymous> (index.js:55)
    at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

Is there a better approach than this? I am a total n00b to storybook so would be glad about any pointer or assistance. (I searched the issues for vue3 without any meaningful results, at least as far as I can tell.)

Describe the bug After creating a new project with create-react-app yarn start and yarn test do not run. There is a conflict with babel-loader version.

Changing the line in package.json to "babel-loader": "8.0.4" seems to fix it.

To Reproduce Steps to reproduce the behavior:

1. Start a project with npx create-react-app taskbox
2. Init storybook npx -p @storybook/cli sb init
3. Run yarn test

Expected behavior Should run the tests.

Code snippets

npx create-react-app taskbox

Creating a new React app in /Users/aericson/projects/taskbox.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 75.22s.

Initialized a git repository.

Success! Created taskbox at /Users/aericson/projects/taskbox
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd taskbox
  yarn start

Happy hacking!
➜  projects cd taskbox
➜  taskbox git:(master) npx -p @storybook/cli sb init
npx: installed 423 in 38.734s
[BABEL] Note: The code generator has deoptimised the styling of /Users/aericson/.npm/_npx/7855/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
 • Adding storybook support to your "Create React App" based project. ✓
 • Preparing to install dependencies. ✓

yarn install v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@storybook/react > @emotion/styled > @emotion/[email protected]" has unmet peer dependency "@emotion/[email protected]".
warning " > [email protected]" has unmet peer dependency "webpack@>=2".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 58.11s.

 • Installing dependencies. ✓

To run your storybook, type:

   yarn storybook

For more information visit: https://storybook.js.org

➜  taskbox git:(master) ✗ yarn test
yarn run v1.12.3
$ react-scripts test

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.4"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/aericson/projects/taskbox/node_modules/babel-loader (version: 8.0.5)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/aericson/projects/taskbox/node_modules/babel-loader is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-loader in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  taskbox git:(master) ✗

Here are the versions installed:

npx create-react-app --version
2.1.3

and the versions that storybook added with `sb init`

  "devDependencies": {
    "@storybook/react": "^4.1.4",
    "@storybook/addon-actions": "^4.1.4",
    "@storybook/addon-links": "^4.1.4",
    "@storybook/addons": "^4.1.4",
    "@babel/core": "^7.2.2",
    "babel-loader": "^8.0.5"
  }

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Framework: react
• Version: 4.1.4

Describe the solution you'd like I'd like to see Stencil.js support, as I see Storybook to be very component focused, and Stencil being a very component focus framework - these tools would compliment each other very well.

Are you able to assist bring the feature to reality? yes, I can...

We're opening this issue to inform you about problems with your dependencies.io configuration or build failures.

We'll add a comment here when we see problems. You can close this issue when you have things resolved -- we'll open it back up if we detect new problems.

Helpful links:

• dependencies.io/docs
• https://app.dependencies.io/

Note: To help keep your repo as clean as possible, this is the only issue that we're going to open and comment on. Feel free to delete the comments that are made as you resolve them, if you want to keep this issue short and tidy.

Describe the bug Storybook doesn't compile after upgrading core-js to version 3.

This might have something to do with symbol polyfill required in https://github.com/storybooks/storybook/blob/0bdb2ca94e5ec732d84d3b330aa3b5bedfc534ec/lib/core/src/server/common/polyfills.js#L3

To Reproduce Steps to reproduce the behavior:

1. Install core-js version 3.0 or higher
2. Have corejs: { version: 3 }, in @babel/env options
3. Try running storybook server
4. Observe error

ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom-collections.iterator' in '/Users/Work/react/.storybook'
 @ ./.storybook/config.js 3:0-55
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

System:

• OS: MacOS
• Framework: react
• Addons: [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
• Version: 5.0.3

Describe the bug Angular 13.1 was released yesterday, however when trying to build Storybook 6.4 with Angular 13.1, there is an error thrown:

ERR! TypeError: getTypescriptWorkerPlugin is not a function
ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
ERR!  TypeError: getTypescriptWorkerPlugin is not a function
ERR!     at /sb-angular13.1-repro/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-13.x.x.js:79:206
ERR!     at /sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:72:16
ERR!     at generateWebpackConfig (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:61:40)
ERR!     at async generateBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:123:20)
ERR!     at async generateI18nBrowserWebpackConfigFromContext (/sb-angular13.1-repro/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)

To Reproduce Basically you just need to run npx sb@next repro and select angular. It's already broken then.

https://github.com/dsimon-onventis/sb-angular13.1

System Environment Info:

System: OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz Yarn: 3.1.1 - /usr/bin/yarn npm: 8.2.0 - ~/.npm-global/bin/npm Browsers: Chrome: 96.0.4664.93 npmPackages: @storybook/addon-actions: ^6.4.9 => 6.4.9 @storybook/addon-docs: ^6.4.9 => 6.4.9 @storybook/addon-essentials: ^6.4.9 => 6.4.9 @storybook/addon-links: ^6.4.9 => 6.4.9 @storybook/angular: ^6.4.9 => 6.4.9 @storybook/builder-webpack5: ^6.4.9 => 6.4.9 @storybook/manager-webpack5: ^6.4.9 => 6.4.9

Describe the bug start-storybook and build-storybook fail with Error: Cannot find module 'webpack/lib/util/makeSerializable.js'

To Reproduce See this commit: https://github.com/ismay/superwolff/commit/2ef03b79734af55c87d8b58f84422c1e1894a2c2. Chromatic tests here are unchanged, so on CI the build isn't failing. However a local npm install (even after clearing node_modules) of this commit, and running npm run storybook:start yields the following output:

> storybook:start
> start-storybook -p 6006 --quiet

info @storybook/react v6.3.0
info 
info => Loading presets
info => Loading 1 config file in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
info => Loading 9 other files in "/Users/ismay/Projects/github/ismay/superwolff/.storybook"
info => Adding stories defined in "/Users/ismay/Projects/github/ismay/superwolff/.storybook/main.js"
info => Using prebuilt manager
info => Using implicit CSS loaders
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
node:internal/modules/cjs/loader:927
  throw err;
  ^

Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Require stack:
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js
- /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
    at Function.Module._load (node:internal/modules/cjs/loader:769:27)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js:6:55)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at /Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:108:42
    at _next0 (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:203:1)
    at Hook.eval [as call] (eval at create (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:286:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/Compiler.js:1017:26) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/dependency.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react-docgen-typescript-plugin/dist/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/framework-preset-react-docgen.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/presets.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-common/dist/cjs/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core-server/dist/cjs/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/dist/cjs/server.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/core/server.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/dist/cjs/server/index.js',
    '/Users/ismay/Projects/github/ismay/superwolff/node_modules/@storybook/react/bin/index.js'
  ]
}

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  Binaries:
    Node: 15.14.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/node
    npm: 7.9.0 - /var/folders/61/0bv_jh4j7jv0znfdbw6p5c180000gn/T/fnm_multishells/21506_1624468041471/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 89.0.1
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0 => 6.3.0 
    @storybook/addon-essentials: ^6.3.0 => 6.3.0 
    @storybook/addon-links: ^6.3.0 => 6.3.0 
    @storybook/builder-webpack5: ^6.3.0 => 6.3.0 
    @storybook/manager-webpack5: ^6.3.0 => 6.3.0 
    @storybook/react: ^6.3.0 => 6.3.0 

when I run start, the progress bar is stuck at 99%. and then my local web page opened but just keep loading. I use npm to install packages.

OS: window 10 node: V10.22.0 npm : V6.14.6

storybook config:

const custom = require('../../webpack.config.js');

module.exports = {
  stories: [
    '../../src/components/V2/**/*.stories.js',
    '../../src/services/Templates/**/*.stories.js',
  ],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-notes',
    '@storybook/addon-knobs',
  ],
  core: {
    builder: "webpack5",
  },
  webpackFinal: async (config) => {
    config.plugins.push(new MiniCssExtractPlugin());
    
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          ...custom.module.rules,
          ...config.module.rules.filter((rule) => rule.test.toString() !== '/\\.css$/'),
        ]
      },
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.resolve.fallback,
          ...custom.resolve.fallback,
        },
        alias: {
          ...config.resolve.alias,
          ...custom.resolve.alias,
        }
      }
    };
  }
}

devDependencies

"devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.10.5",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "@kooneko/livereload-webpack-plugin": "^1.2.1",
    "@storybook/addon-actions": "^6.2.0-rc.4",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-knobs": "^6.2.0-rc.4",
    "@storybook/addon-links": "^6.2.0-rc.4",
    "@storybook/addon-notes": "^5.3.21",
    "@storybook/addons": "^6.2.0-rc.4",
    "@storybook/builder-webpack5": "^6.2.0-rc.4",
    "@storybook/channels": "^6.2.0-rc.4",
    "@storybook/react": "^6.2.0-rc.4",
    "@testing-library/dom": "^7.21.7",
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.1.0",
    "@types/sortablejs": "^1.10.6",
    "@webpack-cli/serve": "^1.3.0",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.2",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "eslint": "^7.3.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prefer-object-spread": "^1.2.1",
    "eslint-plugin-react": "^7.20.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^6.2.0",
    "html-loader": "^2.0.0",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^4.2.5",
    "jest": "^25.5.4",
    "jest-canvas-mock": "^2.2.0",
    "jest-cli": "^25.5.4",
    "lint-staged": "^10.2.11",
    "node-sass": "^4.14.1",
    "postcss-loader": "^5.0.0",
    "react-markdown": "^4.3.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^11.0.1",
    "sass-resources-loader": "^2.1.1",
    "sortablejs": "^1.13.0",
    "style-loader": "^1.3.0",
    "url-loader": "^3.0.0",
    "webpack": "^5.22.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-virtual-modules": "^0.4.2"
  }

Screenshots

┆Issue is synchronized with this Asana task by Unito

I'm trying to use storybook for the first time, so I decided to follow the guides. I can get it working with the examples, but as soon as i pull in my own components i get exports is not defined. It doesn't matter if I use the "Quick Start Guide" or the "Slow Start Guide (React)" I always get the same unhelpful error.

exports is not defined

ReferenceError: exports is not defined at Object. (http://localhost:6006/static/preview.bundle.js:43176:23) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object. (http://localhost:6006/static/preview.bundle.js:43132:76) at Object. (http://localhost:6006/static/preview.bundle.js:43142:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at loadStories (http://localhost:6006/static/preview.bundle.js:40160:3) at ConfigApi._renderMain (http://localhost:6006/static/preview.bundle.js:41134:20) at render (http://localhost:6006/static/preview.bundle.js:41092:17) at ConfigApi.configure (http://localhost:6006/static/preview.bundle.js:41117:9) at Object. (http://localhost:6006/static/preview.bundle.js:40164:68) at Object.defineProperty.value (http://localhost:6006/static/preview.bundle.js:40165:30) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at fn (http://localhost:6006/static/preview.bundle.js:89:20) at Object.window.STORYBOOK_REACT_CLASSES (http://localhost:6006/static/preview.bundle.js:38867:18) at webpack_require (http://localhost:6006/static/preview.bundle.js:679:30) at http://localhost:6006/static/preview.bundle.js:725:39 at http://localhost:6006/static/preview.bundle.js:728:10

That error doesn't really help much, and when I look up the error I end up at some issues from last year all saying that this problem has been patched out... I know that it's probably my component that is exported in some way that storybook doesn't like. But since all I'm getting is exports is not defined (along with some mess of a stacktrace) its kind of hard to debug.

I'm using typescript and I'm compiling it with just plain old tsc.

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": [
    "./src/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

And then importing the compiled js into storybooks.

//index.stories.jsx
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { MatrixEffect } from '../dist/index';

storiesOf('MatrixEffect', module)
  .add('100x100', () => 
    <MatrixEffect height={100} width={100} />
  );

Version

• @storybook/react 3.4.0
• @storybook/addon-actions 3.4.0
• babel-core 6.26.0
• react 16.3.0

What am I missing? (if there's a way to just import the ts straight away then that would preferable. But since I haven't found any official docs for it, this is what I've got so far)

Describe

Angular 12 was released a few hours ago, release post, and it looks like Storybook isn't working with it out of the box for now.

When running yarn storybook, it throws the following error:

info @storybook/angular v6.3.0-alpha.25
info
info => Loading presets
info => Loading 1 config file in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Loading 7 other files in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook"
info => Adding stories defined in "/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/.storybook/main.js"
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Cleared cached manager config
ℹ ｢wdm｣: wait until bundle finished:
info => Loading angular-cli config
info => Using angular project "angular" for configuring Storybook
info => Using angular-cli webpack config
info => Using default Webpack4 setup
ERR! WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR!    -> A rule
ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[9] has an unknown property 'mimetype'. These properties are valid:
ERR!    object { compiler?, enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, realResource?, resolve?, resource?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }
ERR!    -> A rule
ERR!     at Object.webpack [as get] (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/dev-server.js:114:28)
ERR!     at async buildDevStandalone (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:109:31)
ERR!     at async Object.buildDev (/private/var/folders/vz/y7q44gbj4ks8ykwqgh8qgxxc0000gn/T/tmp.svpVK5CL/angular/node_modules/@storybook/core-server/dist/cjs/build-dev.js:150:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

To Reproduce

To bootstrap a fresh Angular 12 + Storybook 6.3 alpha just run npx sb@next repro ./a_directory --framework angular --template angular

System

  System:
    OS: macOS 11.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 2.4.1 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 87.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-docs: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-essentials: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/addon-links: ^6.3.0-alpha.25 => 6.3.0-alpha.25
    @storybook/angular: ^6.3.0-alpha.25 => 6.3.0-alpha.25

    @angular-devkit/build-angular: ~12.0.0
    @angular/cli: ~12.0.0
    @angular/compiler-cli: ~12.0.0

Additional context

Maybe also related to https://github.com/storybookjs/storybook/issues/14044#issuecomment-839110931?

Would be nice to be able to have "Substories" or a Hierarchy of stories. My case involves various mini "apps" being contained in the same repo. A simple solution would be an option to display stores named like ui.core.foo and ui.core.bar like:

ui
└── core
    ├── bar
    └── foo

With support for expanding and collapsing nodes.

Describe the bug

Inside the new preview-api package things appear to be included too many times. For example:

shilman@MBP14 lit-vite-default-js % grep getSelectionSpecifierFromPath node_modules/@storybook/preview-api/dist/*
node_modules/@storybook/preview-api/dist/chunk-S6GMWV4D.mjs:var getSelectionSpecifierFromPath = () => {
node_modules/@storybook/preview-api/dist/chunk-S6GMWV4D.mjs:    this.selectionSpecifier = getSelectionSpecifierFromPath();
node_modules/@storybook/preview-api/dist/core-client.js:var getSelectionSpecifierFromPath = () => {
node_modules/@storybook/preview-api/dist/core-client.js:    this.selectionSpecifier = getSelectionSpecifierFromPath();
node_modules/@storybook/preview-api/dist/index.js:var getSelectionSpecifierFromPath = () => {
node_modules/@storybook/preview-api/dist/index.js:    this.selectionSpecifier = getSelectionSpecifierFromPath();
node_modules/@storybook/preview-api/dist/preview-web.js:var getSelectionSpecifierFromPath = () => {
node_modules/@storybook/preview-api/dist/preview-web.js:    this.selectionSpecifier = getSelectionSpecifierFromPath();

Note that this is also bundled in the preview package as well, further contributing to the install size.

This may contribute to a ballooning install size in our benchmarks:

To Reproduce

No response

System

No response

Additional context

No response

Describe the bug

Files in the sb-addons/.storybook build folder are treated as 404 Not Found when deployed on netlify. It appears to be related to this issue: https://answers.netlify.com/t/hidden-files-removed-in-zip-deploy/8997

My current workaround is to add a step in my build script that will copy all the files into a folder called sb-addons/storybook and add redirects into a netlify.toml config file.

To Reproduce

https://github.com/Bedrock-Layouts/Bedrock

https://63b5b0e9b29f8f0008df08bb--loving-albattani-5b3d39.netlify.app

System

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    @storybook/addon-actions: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-essentials: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/addon-links: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/react: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/react-vite: ^7.0.0-beta.19 => 7.0.0-beta.19 
    @storybook/theming: ^7.0.0-beta.19 => 7.0.0-beta.19

Additional context

@ndelangen asked me to tag him in this issue.

Is your feature request related to a problem? Please describe

I need to be able to dynamically read the port, so that I can pass it to cypress, when running e2e tests in parallel. We need this specifically for Nx, but I think it could apply to other people's use cases as well.

Describe the solution you'd like

Here return return { port }

And for Angular:

Here return:

return { success: true, info: { port } };

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

Is your feature request related to a problem? Please describe

We want to be able to call the automigrators from Nx. In Nx, there are multiple .storybook directories, and multiple .storybook/main|preview.js files.

From within a Nx generator, we want to recursively call the automigrators (eg. npx sb automigrate --fixId mainjsFramework) and also pass a flag to tell Storybook which directory to look into, so for example:

npx sb automigrate --fixId mainjsFramework -c apps/my-app/.storybook

That would enable us to call the automigrators from Nx, or allow anyone to call the automigrators for a Nx workspace.

Describe the solution you'd like

The functions that are listed here to accept an option for configFolderPath (or anything similarly named, to allow Nx to pass the directory).

Similarly, if there's a migrator that looks for any other Storybook-related files (eg. stories transformation) to accept a relevant glob or something (like sb migrate csf-2-to-3 which accepts --glob).

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

Issue: N/A

What I did

The sb repro as we know it was entirely removed, as it's been "deprecated" for some time. The former sb repro-next command becomes the new sb repro, with the updated functionality bringing the correct sandboxes

This is a big change to the command, and they are not 100% aligned, however it's an internal command to help contributors, so I think it's fine.

TODO:

• [ ] rename repro-templates-temp repository to repro-sandboxes

How to test

• [ ] Is this testable with Jest or Chromatic screenshots?
• [ ] Does this need a new example in the kitchen sink apps?
• [ ] Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

Describe the bug

<ng-template #spring> I am accessing the ngtemplate using viewchild but unable to access the template

To Reproduce

use ng -template with viewchild

System

No response

Additional context

No response