storybookjs / presets

🧩 Presets for Storybook

Storybook Presets

Storybook presets are grouped collections of babel, webpack, and addons configurations that support specific use cases.

For example, to write your stories in Typescript, rather than manually configuring Storybook for typescript with individual babel and webpack configs, you can simply use the @storybook/preset-typescript package, which does the heavy lifting for you.

This repo is the collection of presets maintained by the storybook team

Check the Preset Gallery for a list of available presets

presets's Issues

CRA preset: MDX support?

preset-create-react-app should support Storybook Docs MDX out of the box. The old built-in preset does.

What I did

1. setup CRA + TS + DocsPage
2. Update .storybook/config.ts to load MDX files
3. Add a src/stories/Test.stories.mdx file

config.ts

import { configure } from "@storybook/react";

// automatically import all files ending in *.stories.(tsx|jsx)
configure(
  require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
  module
);

Test.stories.mdx

import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Test" />

Here's some _markdown_!

What happens

I expect to see the MDX show up in a new "docs-only story", but I see nothing.

When I [debug my MDX], the loaded source is:

module.exports = __webpack_public_path__ + "static/media/Test.stories.d353c3e3.mdx";

This looks like .mdx files are loaded with a file-loader despite the `addon-docs/react/preset configured in the initial setup.

NOTES

When I remove the CRA preset, the Docs preset works again

`preset-typescript` cannot find module 'typescript'

I'm trying to set up TypeScript with a new project. Here is an example repo that exhibits the problem I'm running into: https://github.com/kevinehosford/test-preset-typescript

I followed the instructions to add preset-typescript; however, running storybook fails with the following error:

info @storybook/react v5.3.9
info
info => Loading presets
info => Loading presets
info => Adding stories defined in ".storybook/main.js".
ERR! Error: Cannot find module 'typescript'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:33:19)
ERR!     at ForkTsCheckerWebpackPlugin.validateTypeScript

Is there some configuration step I've missed?

Images not loading with preset-create-react-app

I used to have storybook configured where it would auto-detect that my project was create-react-app based. I recently upgraded storybook and started using the cra preset. Using the preset seems to have a tighter integration with react-scripts (e.g. now storybook is as expected transpiling node_modules), so that's great.

However, I'm running into an issue with image imports in my components that used to work without the preset.

When I inspect the broken image in the story, the source is a base64 data uri as expected. When I decode it, it's a webpack path to a non-existent file.

Decodes to: module.exports = __webpack_public_path__ + "static/media/logo.2aa49855.png";

So the images on webpack dev server are not being correctly generated?

Logo.stories.tsx

export default {
  title: 'Graphics/Logo',
  component: Logo,
};

export const logo = () => (
    <Logo />
);

Logo.tsx

import React from 'react';
import styled from 'styled-components/macro';
import logo from '../../../assets/logo.png';

const SWrapper = styled.div`...`;
const SLogo = styled.img`...`;

const Logo = () => (
  <SWrapper>
    <SLogo src={logo} alt="Logo" />
  </SWrapper>
);

export default Logo;

presets.ts

const path = require('path');

module.exports = [
  {
    name: '@storybook/preset-create-react-app',
    options: {
      tsDocgenLoaderOptions: {
        tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
      },
    },
  },
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      // Disabling storysource on the docs page. It's currently causing lint errors on SB 5.2.8 when a story is updated.
      sourceLoaderOptions: null,
    },
  },
];

Env info
react-scripts: v3.0.1
storybook: v5.2.8 (addon-docs, addon-knobs)
preset-create-react-app: v1.3.2

SCSS preset for Storybook > Advanced Usage example will cause storybook build to fail

If the exact example of ...

module.exports = [
  {
    name: '@storybook/preset-scss',
    options: {
      cssLoaderOptions: {
        modules: true,
        localIdentName: '[name]__[local]--[hash:base64:5]',
      },
    },
  },
];

... is used in your presets.js, yarn storybook will fail due to incorrect placement/useage of localIdentName: '[name]__[local]--[hash:base64:5]',

A working example would be:

module.exports = [
  {
    name: '@storybook/preset-scss',
    options: {
      cssLoaderOptions: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      },
    },
  },
];

Will fork, update doc and presets.js, and do a PR :)

[TS] Handle Addons

Hi,
thanks for the job with that!

I'm trying to add a custom addon to my storybook, and this addon needs some typescript files.

The addons.ts file isn't parsed as a typescript file, and if I import some ts module in it, they are not resolved.

If I try to write some typescript in addons.ts, I have the classic error:

ModuleParseError: Module parse failed: Unexpected token (4:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I've tried with a .babelrc with typescript preset, but without success.

How are we supposed to handle that?

Thank you for your help.

docgen not working with preset-typescript

When using preset-typescript, I am finding the docgen is not happening.

When I do <Props of={MyWidget} /> (from the Storybook 5.2 alpha for the new Docs feature), if I use the preset, then this component says "No props found for this component"

If I don't use the preset and instead configure TypeScript manually in webpack.config.js, then the props show up as expected.

I created a tiny CRA app here to demo the issue: https://github.com/city41/storybook-preset-typescript

The README has repro steps.

What is odd is from what I can tell, the preset and the manual configuration should be equivalent?

Bug(preset-typescript): React is not defined

when using emotion, if we hint compiler to use emotion jsx instead of React object with the code

/** @jsx jsx */
import { css, jsx } from "@emotion/core";

the page of stories output error: React is not defined

I have to import React manually with emotion jsx, which disatisfy the IDE:

[preset-storysource] Not published to NPM

I tried to install @storybook/preset-storysource, but apparently isn't published.

$ yarn add @storybook/preset-storysource -D
yarn add v1.17.3
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.npmjs.com/@storybook%2fpreset-storysource: Not found".

Is there a way I can help to solve this issue?

preset-create-react-app support of craco

When @craco/craco is used as a replacement of react-scripts, there is no fork of react-scripts, thus this line, which tries to require the non-existing module .../@craco/craco/index.js/config/webpack.config, will fail.
Although we could solve the issue by either providing a local react-scripts or mocking the module, I want to know whether there is any plan for preset-create-react-app to support user provided entire webpack config. Thanks a lot.

The storybook config looks like

addons: [
    {
        name: "@storybook/preset-create-react-app",
        options: {
            scriptsPackageName: "@craco/craco"
        }
    },
    ...
]

SCSS loading with Create React app

Using SASS as in example doesn't seem to be working and produces this error:

ERROR in ./src/style/index.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--7-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-5-4!./node_modules/style-loader/dist!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/style/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was "var content = requi"
        on line 1 of /home/xx/src/style/index.scss
>> var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../nod
   ^

 @ ./src/style/index.scss 1:14-412 20:4-31:5 23:25-423
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

I've created fresh project with Create React app in TypeScript. Line 1 contains @import

My .storybook/config.js contains only this:

import '../src/style/index.scss'

EDIT: Also hot reloading doesn't seem to work at all with this.

SVGR preset

We get a lot of issues relating to inline SVGs. Anybody want to write a preset for it? See e.g.

storybookjs/storybook#6758 (comment)

【question】Is there a way to set global Decorator and Parameters in preset ?

I am writing a preset to make my config reuseable, I find There is a lot config in the .storybook/config.js file, I want move it to the preset, but I had not find a way to do it on the doc, is it possible ?
Thanks in advance.

Preset for Next.js, TypeScript, and CSS Modules

I created a gist showing how I got Storybook working for a Next.js app that uses both TypeScript and CSS Modules.

https://gist.github.com/justincy/b8805ae2b333ac98d5a3bd9f431e8f70

Is there any interest in this being added as a preset in this repo?

examples/cra-ts does not work

1. Clone this project.
2. yarn
3. cd examples/cra-ts
4. yarn storybook
5. error:

Module parse failed: Unexpected token (7:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default { title: 'Button' };
| 
> export const Default: FC = () => (
|   {process.env.REACT_APP_TEST_VAR}
| );

I found that preset-create-react-app does not support tsx ?

Module parse failed: Unexpected token (62:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| storiesOf('react-photo-view', module)
|   .add('Example', () => (
>     <PhotoProvider>
|       <ImageList>
|         {photoImages.map((item, index) => (

Presets for CRA and TS should stick to react-docgen-typescript-loader 3.2.1

Presets for CRA and TS should stick to react-docgen-typescript-loader 3.2.1 until the folllowing issue is fixed: strothj/react-docgen-typescript-loader#70

import css files not working

following guide at

https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

reproduce repo

https://github.com/zhigang1992/bug-free-fiesta

Regarding CSS not working, I've found that

import './testFails.css';
import styles from './test.module.css';

// This works
export const Text = () => <div className={styles.testClass}/>;
// This does not work
// export const Text = () => <div className="testClass"/>;

Only css-modules works, but not importing style directly.

@mrmckeb

[CRA] Non-relative imports doesn't work

It seems non-relative imports dont't work when using create-react-app-preset, althought it works with built-in preset (which will be removed at 6.*)

Starting over to fix migration, can't get preset-typescript to work

I've been having a lot of trouble updating Storybook from 5.1.9 to 5.2.5 and part of that is the Typescript setup we have. I threw my hands up and started an entire new project to at least get a build working, and then I can integrate it into my existing project. Even that doesn't work.

Basic example
https://github.com/mattfelten/storybook-preset-typescript-test

The one story here is not being found. I followed the docs. What am I missing?

Examples cra-ts not working

I attempted to start up the example cra-ts app and it's failing like this:

yarn run v1.19.1
$ start-storybook
info @storybook/react v5.2.7
info
info => Loading presets
WARN   Failed to load preset: {"name":"@storybook/preset-create-react-app","options":{"tsDocgenLoaderOptions":{}}}
ERR! Error: Cannot find module '@storybook/preset-create-react-app'

All i did was clone the repo, run yarn install on the cra-ts example, and started the storybook. Maybe it has to do with the * dep listing for the preset in package.json?

I wanted to get this running to debug another issue I think exists, where image imports do not work with this preset. I'll open another issue for what I'm seeing there.

Add READMEs

☝️

preset-typescript does not work according to instructions

I have a clean setup for storybook/react: npx -p @storybook/cli sb init --type react
I added preset-typescript to new presets.js file like that module.exports = ['@storybook/preset-typescript']; and dependencies npm i -D @storybook/preset-typescript react-docgen-typescript-loader ts-loader

Now I have quite a simple basic configuration:

/*.storybook/config.js*/
import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.ts$/), module);

/*.storybook/presets.js*/
module.exports = ['@storybook/preset-typescript'];

/*.storybook/addons.js*/
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

/*stories/0-Welcome.stories.ts*/

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Welcome',
};

export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;

toStorybook.story = {
  name: 'to Storybook',
};

And instruction says that's it, but:

So how does it work?

presets-create-react-app doesn't work on windows.

With version 1.2.0, on Windows I get the following error when I start Storybook:

ERR! Error: Cannot find module 'C:\Dev\10_poc\storybook\node_modules\react-scripts\bin\react-scripts.js"\config\webpack.config'
ERR! Require stack:
ERR! - C:\Dev\10_poc\storybook\node_modules\@storybook\preset-create-react-app\index.js

I guess you need to strip \bin\react-scripts.js from the path.

Thank you

preset-create-react-app fails to resolve react-scripts in RushJS monorepo with PNPM

I get the following error:
stack: "Error: Cannot find module 'monorepodir/libraries/ui/node_modules/config/webpack.config'\n" +

I can fix it by manually commenting out line 27-39 in
node_modules/@storybook/preset-create-react-app/helpers/getReactScriptsPath.js

Seems like /node_modules/.bin/react-scripts isn't symlinked like the preset expects which makes it resolve to an incorrect directory

Basic CRA preset does not work on clean project

Hey I have tried setting up a new CRA project using CRA 3.3.0 and adding storybook (cli version 5.2.8) with the CRA preset and it immediately errors out. Below I am including the steps I took, the error message received, and a link to the git repo to reproduce the issue. Any help with what to do in this case would be great.

https://github.com/colingm/storybook-cra-error

npm i -g [email protected] [email protected]
create-react-app sanity --template typescript
cd sanity
sb init
npm i @storybook/preset-create-react-app
echo "module.exports = ['@storybook/preset-create-react-app'];" > .storybook/presets.js
npm run storybook

ERROR in ./node_modules/is-map/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cmaxfield/workspace/audit/sanity/node_modules/is-map/index.js: 'return' outside of function (12:1)

  10 | 		return false;
  11 | 	};
> 12 | 	return;
     | 	^
  13 | }
  14 |
  15 | var $mapHas = $Map ? Map.prototype.has : null;
    at Parser.raise (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:6983:17)
    at Parser.parseReturnStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11027:12)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10714:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseBlock (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11213:10)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10742:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseIfStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11020:28)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10711:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseTopLevel (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10597:10)
    at Parser.parse (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:12107:10)
 @ ./node_modules/es-get-iterator/index.js 131:16-33
 @ ./node_modules/iterate-value/index.js
 @ ./node_modules/promise.allsettled/implementation.js
 @ ./node_modules/promise.allsettled/polyfill.js
 @ ./node_modules/promise.allsettled/shim.js
 @ ./node_modules/promise.allsettled/auto.js
 @ ./node_modules/airbnb-js-shims/target/es2020.js
 @ ./node_modules/airbnb-js-shims/target/es2019.js
 @ ./node_modules/airbnb-js-shims/target/es2018.js
 @ ./node_modules/airbnb-js-shims/target/es2017.js
 @ ./node_modules/airbnb-js-shims/target/es2016.js
 @ ./node_modules/airbnb-js-shims/target/es2015.js
 @ ./node_modules/airbnb-js-shims/target/es5.js
 @ ./node_modules/airbnb-js-shims/index.js
 @ ./node_modules/@storybook/core/dist/server/common/polyfills.js
 @ 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&quiet=true

ERROR in ./node_modules/is-set/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cmaxfield/workspace/audit/sanity/node_modules/is-set/index.js: 'return' outside of function (12:1)

  10 | 		return false;
  11 | 	};
> 12 | 	return;
     | 	^
  13 | }
  14 |
  15 | var $mapHas = $Map ? Map.prototype.has : null;
    at Parser.raise (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:6983:17)
    at Parser.parseReturnStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11027:12)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10714:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseBlock (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11213:10)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10742:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseIfStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11020:28)
    at Parser.parseStatementContent (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10711:21)
    at Parser.parseStatement (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10666:17)
    at Parser.parseBlockOrModuleBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11242:25)
    at Parser.parseBlockBody (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:11229:10)
    at Parser.parseTopLevel (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:10597:10)
    at Parser.parse (/Users/cmaxfield/workspace/audit/sanity/node_modules/@babel/parser/lib/index.js:12107:10)
 @ ./node_modules/es-get-iterator/index.js 133:16-33
 @ ./node_modules/iterate-value/index.js
 @ ./node_modules/promise.allsettled/implementation.js
 @ ./node_modules/promise.allsettled/polyfill.js
 @ ./node_modules/promise.allsettled/shim.js
 @ ./node_modules/promise.allsettled/auto.js
 @ ./node_modules/airbnb-js-shims/target/es2020.js
 @ ./node_modules/airbnb-js-shims/target/es2019.js
 @ ./node_modules/airbnb-js-shims/target/es2018.js
 @ ./node_modules/airbnb-js-shims/target/es2017.js
 @ ./node_modules/airbnb-js-shims/target/es2016.js
 @ ./node_modules/airbnb-js-shims/target/es2015.js
 @ ./node_modules/airbnb-js-shims/target/es5.js
 @ ./node_modules/airbnb-js-shims/index.js
 @ ./node_modules/@storybook/core/dist/server/common/polyfills.js
 @ 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&quiet=true

Question: JSX in stories

Are you unable to have jsx in stories with the CRA preset?

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

This is thrown from this story

It appears to work without the preset and the base config

Error occured when eject the cra-ts example

I download the cra-ts example and run :

1. npm run eject
2. npm run storybook

And the

WARNING in ./src/components/Button/Button.stories.tsx 7:20
Module parse failed: Unexpected token (7:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default { title: 'Button' };
| 
> export const Default: FC = () => (
|   <Button>{process.env.REACT_APP_TEST_VAR}</Button>
| );
 @ ./src sync \.stories\.(mdx|tsx?)$ ./components/Button/Button.stories.tsx
 @ ./.storybook/config.ts
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/../../../react/config.js ./.storybook/config.ts (webpack)-hot-middleware/client.js?reload=true&quiet=true

ERROR in ./src/components/Button/Button.stories.mdx
Module not found: Error: Can't resolve './Button' in '/Users/yongxuexie/Desktop/neko/src/components/Button'
 @ ./src/components/Button/Button.stories.mdx 9:0-30 28:15-21 40:27-33 43:21-27 47:8-14 54:50-56 56:19-25
 @ ./src sync \.stories\.(mdx|tsx?)$
 @ ./.storybook/config.ts
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/../../../react/config.js ./.storybook/config.ts (webpack)-hot-middleware/client.js?reload=true&quiet=true

Please help to fix it.

Use fork-ts-checker-webpack-plugin to move type checking into separate process

Feature request

Description

Use fork-ts-checker-webpack-plugin and set transpileOnly option in ts-loader to true in order to make the builds faster by moving type checking into separate process.

Motivation

I have been using Typescript within Storybook for a long time when realised it's getting extremely slow when the app gets bigger. Currently I have over 800 modules to build which takes approximately 2 minutes for Storybook to start up. As of now I'm using modified version of webpack configuration in my project adding a plugin fork-ts-checker-webpack-plugin along with transpileOnly option set to true in ts-loader which makes all the builds faster > 3 times.

How to add configuration?

I use @storybook/preset-create-react-app, and I want to add an alias to the webpack configuration.

What should I do?

Why do you need "preset-* /. Storybook" ?

.Storybook of preset-* is not working.
preset-typescript for example.

ERROR in ./.storybook/config.ts
Module not found: Error: Can't resolve './story' in './storybookjs/presets/packages/preset-typescript/.storybook'

what difference examples with .Storybook of preset-*?

preset-create-react-app v1.3.0 breaks SASS support

v1.3.0 of preset-create-react-app appears to break SASS support. (I've been forced to downgrade to v1.2.0 anyway.)

I installed CRA and then Storybook over the top giving me v1.2 at the time. (Though please note this is with Typescript support.) Everything worked but after deleting my package-lock.json and node_modules/ and running npm install (and so pulling down the new version, v1.3.0) I had the situation in which:

1. CRA (npm start) still worked with SCSS.
2. Storybook (npm run storybook) failed with an error like below:

   ERROR in ./src/index.scss 2:0
   Module parse failed: Unexpected character '@' (2:0)
   You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Pinning to v1.2 and reinstalling would appear to fix the problem leading me to suspect there is a bug in the new version.

I coudn't see anything obviously wrong in the webpack config that I extracted. (It has an entry for handling .scss files.) That said, I'm not an expert in webpack.

I did notice that the final entry in the oneOf array (that appears to contain the rule for handling .scss files) has been replaced with an empty object. The old version didn't appear to relate to SASS in any way though. Is it possible that the empty object would invalidate the entire array and so wipe out the SASS handling rule? The previous version of this object was as follows:

{
  loader: '/path/to/my/project/node_modules/file-loader/dist/cjs.js',
  exclude: [
    /\.(js|mjs|jsx|ts|tsx)$/,
    /\.html$/,
    /\.json$/,
    /\.(ejs|mdx)$/
  ],
  options: { name: 'static/media/[name].[hash:8].[ext]' }
}

Unable to get Babel Preset for Emotion working

Describe the bug
@emotion/babel-preset-css-prop
, which is used to enable css prop in emotion for CRA, breaks in storybook.

To Reproduce
Steps to reproduce the behavior:

1. Clone my fork of storybookjs/presets - git clone https://github.com/joshuawootonn/presets.git
2. cd /presets/examples/cra-ts
3. yarn
4. start CRA - yarn start
5. start Storybook - yarn storybook

Expected behavior
CRA should look like

with /components/Emotion.tsx looking like this

However Storybook looks like this

with /components/Emotion.tsx looking like this

System:

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0

^I am using chrome not sure why it says otherwise

Additional context
These posts helped me get here:
storybookjs/storybook#6479
storybookjs/storybook#7340 (comment)

typescript preset, use proptypes for docgen

Is there anyway to tell the preset to let defined PropTypes 'win' over TS type defs when generating prop tables? I'm finding the TS support for addon docs is still a bit hit and miss and would love a little switch like this as a fallback.

Update preset for CRA

Preparing CRA preset for release

The preset for CRA has been around for a while now, and is getting a few hundred downloads a week with no reported issues.

It's time to polish up the preset, and remove the in-built preset from CRA.

The PR in-progress is:
#29

TODO:

• Add support for custom Babel configs.
• Handle environment variables prefixed with CRA (see: storybookjs/storybook#4841)
• Change the README title (embarrassing).
• Add basic automation tests.
• Add and document support for react-docgen-typescript-loader. Covers #21.
• Create a PR for @storybook/react to remove built-in preset.
  • This preset should be used instead of the existing functionality.
  • On init, this preset should be installed if the app matches the criteria.
  • Document migration steps and update docs for React and TypeScript.
    • Look through all React/TypeScript docs.
    • https://github.com/storybookjs/storybook/blob/a65bd69bbe0e5dff716f8295785ac4fd60214d4e/docs/src/pages/guides/guide-react/index.md#automatic-setup
  • See if we can solve storybookjs/storybook#8201.
  • Remove any other potential conflicting packages.

Future tasks:

• Add better automation tests, covering:
  • storybookjs/storybook#6479

preset-create-react-app: adding the configDir for the include array breaks when using exclude

presets/packages/preset-create-react-app/src/helpers/processCraConfig.ts

Line 128 in dc3ae59

include: [_include as string, configDir].filter(Boolean),

I have a bit of an abnormal scenario.

I forked create-react-app, and in my babel-loader rule, I use an exclude function instead of the include array.

But this preset adds in configDir in the includes array, which then messes me up.

According to webpack's docs

When using multiple conditions, all conditions must match.

So my exclude function is only applying to files inside .storybook.

To solve my issue, I find my special babel-loader with the exclude function, and run

delete babelLoader.include

Why am I bringing this up?

1. In case someone else who has forked cra is having issues
2. We could potentially do a check in the processCraConfig.ts file. If using exclude, and NOT include then maybe we could log a big warning to the console?

I'm willing to make a PR for that, if you think it is valuable.
Also, if you'd like, I could maybe add this note to the preset-create-react-app Advanced Usage readme docs.

Let me know if you'd like me to take any of that on.

EXTEND_ESLINT=true breaks linting (typescript?)

I'm working with Storybook and create-react-app and am using the @storybook/preset-create-react-app preset.

W/ react-scripts you need to set the environment variable EXTEND_ESLINT to true, to have it recognize the .eslintrc config.

...So I added EXTEND_ESLINT=true to my .env file, but now I'm getting errors from TSX files.
Weird errors like when using the TypeScript as keyword I get a Syntax error, unexpected ;.

It kinda seems like Typescript files are read as usual js files, but I'm not sure.

... I know that my eslintrc is not correctly loaded, because inside it I have prettier configured i.e, but prettier errors only show up in my editor, not in the storybook runtime.

original ticket

Syntax error when trying to resolve a non-default exported Typescript component into a story when using CRA preset

Bug: When trying to build a story from a functional typescript react component that isn't default exported a syntax error is throw by the babel-loader.

Resolution: Submitted a PR - Locally the issue seems to be resolved by adding "allowSyntheticDefaultImports": true to the tsconfig.json in the preset's package.

React:

    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",

package.json dev dependencies:

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@storybook/addon-actions": "^5.3.14",
    "@storybook/addon-docs": "^5.3.14",
    "@storybook/addon-links": "^5.3.14",
    "@storybook/addons": "^5.3.14",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.14",
    "@types/jest": "^25.1.3",
    "@types/node": "^13.7.7",
    "@types/react": "^16.9.23",
    "@types/react-dom": "^16.9.5",
    "@types/storybook__react": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^2.22.0",
    "@typescript-eslint/parser": "^2.22.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^1.19.1",
    "react-docgen-typescript-loader": "^3.6.0",
    "typescript": "^3.8.3"
  }

Replicating the error

Example Component: Task.component.tsx

import React, { FC } from 'react';

export type TaskProps = {
    id: string,
    title: string,
    description: string
}

export const TaskComponent: FC<TaskProps> = ({ id, title, description }: TaskProps) => {
    return (
        <div className="task-component">
            My ID is {id} <br />
            My Title is {title} <br />
            My Description is {description}
        </div>
    );
}

Example Story: Task.stories.tsx

import React, { FC } from 'react';
import { TaskComponent } from './Task.component';

export default {
    component: TaskComponent,
    title: 'Task',
    excludeStories: /.*Data$/,
}

export const taskData = {
    id: '1',
    title: 'Test Title',
    description: 'Elaborate Test Description'
}

export const Default: FC = () => <TaskComponent id={taskData.id} title={taskData.title} description={taskData.description} />;

Running yarn storybook:

Entrypoint main [big] = runtime~main.c9c6661b386f36d8b962.bundle.js runtime~main.c9c6661b386f36d8b962.bundle.js.map vendors~main.c9c6661b386f36d8b962.bundle.js vendors~main.c9c6661b386f36d8b962.bundle.js.map main.c9c6661b386f36d8b962.bundle.js main.c9c6661b386f36d8b962.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 88 bytes {main} [built]
[./.storybook/generated-entry.js] 238 bytes {main} [built]
[./node_modules/@storybook/addon-docs/blocks.js] 43 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js] 292 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js] 672 bytes {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/frameworks/react/extractProps.js] 2.21 KiB {vendors~main} [built]
[./node_modules/@storybook/addon-docs/dist/lib/docgen/index.js] 932 bytes {vendors~main} [built]
[./node_modules/@storybook/client-api/dist/index.js] 3.82 KiB {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 120 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.34 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] 7.68 KiB {vendors~main} [built]
    + 1348 hidden modules

ERROR in ./src/components/task/Task.component.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /...path_to_app/app/src/components/task/Task.component.tsx: Unexpected token (28:0)

  26 |         // @ts-ignore
  27 |         STORYBOOK_REACT_CLASSES["src/components/task/Task.component.tsx#TaskComponent"] = { docgenInfo: TaskComponent.__docgenInfo, name: "TaskComponent", path: "src/components/task/Task.component.tsx#TaskComponent" };
> 28 | }
     | ^
  29 | catch (__react_docgen_typescript_loader_error) { }
    at Object._raise (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:723:17)
    at Object.raiseWithData (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:716:17)
    at Object.raise (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:710:17)
    at Object.unexpected (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:8610:16)
    at Object.parseExprAtom (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9893:20)
    at Object.parseExprAtom (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:4543:20)
    at Object.parseExprSubscripts (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9479:23)
    at Object.parseMaybeUnary (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9459:21)
    at Object.parseMaybeUnary (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6747:20)
    at Object.parseExprOps (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9329:23)
    at Object.parseMaybeConditional (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9302:23)
    at Object.parseMaybeAssign (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9257:21)
    at Object.parseMaybeAssign (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6694:20)
    at Object.parseExpression (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9209:23)
    at Object.parseStatementContent (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11045:23)
    at Object.parseStatementContent (/...path_to_app/app/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:6453:18)
 @ ./src/components/task/Task.stories.tsx 45:0-49 72:13-26 81:68-81
 @ ./src sync ^\.\/(?:(?:|\/|(?:(?:(?!(?:|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(ts|tsx|js|jsx|mdx))$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

preset-ant-design does't work with TypeScript

What happens?
Ant Design components in Storybook does not have any styling applied to them.

It does however work if I change both the MyComponent.tsx and MyComponent.stories.tsx to MyComponent.js and MyComponent.stories.js.

I also tried adding the preset-typescript package which did not change anything.

.storybook/config.js

import { configure } from '@storybook/react'

const componentsReq = require.context('../src/components', true, /\.stories.tsx$/)

function loadStories() {
  componentsReq.keys().forEach(componentsReq)
}

configure(loadStories, module)

.storybook/presets.js

module.exports = [
  {
    name: '@storybook/preset-ant-design',
    options: {
      lessOptions: {
        modifyVars: {
          'layout-body-background': '#ffffff',
          'layout-header-background': '#ffffff',
        },
      },
    },
  },
]

CRA preset: triconfig compatibility

CRA preset check relies on the old presets.js configuration

This should be updated to also handle Tri-config. Also @ndelangen do we need some kind of helper function for this that handles both cases for addons to use?

Using addon-docs/react/preset & preset-create-react-app needs to keep the order

Hi,
I use storybook in CRA with typescript config.
When I added addon-docs/react/preset & preset-CRA, some weird errors happened.

At first, I config .storybook/presets.js like below:

module.exports = ['@storybook/preset-create-react-app', '@storybook/addon-docs/react/preset'];

When I edit my component, it always popup errors:

The error can be fixed by saving the 'stories' file.

But when I change other files, the error shows up again.

Finally, I found the solution is to change the order of presets like below:

module.exports = ['@storybook/addon-docs/react/preset', '@storybook/preset-create-react-app'];

The error never show up again.

Is this a bug or should be documented?

@storybook/preset-create-react-app: babel-preset-react-app is require?

I got an error when updating to storybook v5.3 and the new @storybook/preset-create-react-app.
Apparently babel-preset-react-app was missing and I had to install it.

If this package is a requirement for this preset to work, why isn't it listed as a peer dependency or similar? 🤔

Ant Design preset

Apparently there is some work required to get Ant Design working with Storybook. If we could package that into a preset, it would help people use the tools together.

Here's what that would look like:

• @storybook/preset-ant-design package under packages/preset-ant-design
• Copy structure of an existing preset (e.g. preset-typescript)
• Include README and sample storybook

Presets reference docs here: https://storybook.js.org/docs/presets/introduction/

preset-create-react-app: CRA build configuration affected where Storybook's generated CSS is placed

First, I want to thank for the effort put into documenting Storybook migration from 5.2.8 to 5.3.8. Most of the things went smoothly. And I really like the simplifications you introduced 👏.

But I bumped into a small issue. I seems that the fonts are not longer loading.

My investigation showed that original CRA build configuration affected where Storybook's generated CSS is placed, but the paths in this generated CSS were not adjusted.

Storybook 5.2.8 (with implicit CRA preset) used to create this structure:

Everything was good here: main CSS was placed at the root of /storybook and fonts were loaded from a relative folder (combined path was /storybook/static/media)

Storybook 5.3.8 (with explicit [email protected] preset) mimics React build and creates the following structure where generated CSS is placed under /storybook/static/css

(I used build-storybook -o build/.infrastructure/storybook to put Storybook's files into the same folder as React)

But the CSS generated with Storybook 5.3.8 still tries to load fonts relatively to the main CSS file location:

This results in the browser trying to load fonts from /storybook/static/css/static/media (which does not exist).

FYI, when I run Storybook locally with start-storybook, I have no font loading issues.

I'm using these versions:

react-scripts 3.3.0
@storybook/react 5.3.8
@storybook/preset-create-react-app 1.5.2

Let me know if any additional information is necessary.

Things to do here

• Linter
• Jest
• CI

Improve tests and documentation for CRA preset

Tasks:

• Add better tests:
  • Cover storybookjs/storybook#6479.
  • Look to Chromatic
• Ensure full Babel config support
  • Update README - A note on custom Babel configs

[preset-create-react-app] undefined property encountered in `processCraConfig` when using pnpm

I am unable to use @storybook/preset-create-react-app when also using pnpm as my package manager.

The issue occurs in this section, at the return value on line 79:

presets/packages/preset-create-react-app/src/helpers/processCraConfig.ts

Lines 64 to 83 in 7c4012a

	if (
	isString(oneOfRule.loader) &&
	oneOfRule.loader.includes('file-loader')
	) {
	if (isStorybook530) {
	const excludes = [
	'ejs', // Used within Storybook.
	'mdx', // Used with Storybook Docs.
	...(options.craOverrides?.fileLoaderExcludes || []),
	];
	const excludeRegex = new RegExp(
	`\\.(${excludes.join('|')})$`,
	);
	return {
	...oneOfRule,
	exclude: [...oneOfRule.exclude, excludeRegex],
	};
	}
	return {};
	}

The reason for it is because of the way pnpm is storing dependencies. The path for the loader property of the url-loader rule looks like this:

D:\dev\source\react\storybook-presets\examples\cra-ts-pnpm\node_modules\.pnpm\registry.npmjs.org\url-loader\2[email protected][email protected]\node_modules\url-loader\dist\cjs.js

So on line 66, oneOfRule.loader.includes('file-loader') will return a false-positive, because file-loader is indeed in that resolved path.

I fixed it like this:

64: if (
65:   isString(oneOfRule.loader) &&
66:   /[/\\]file-loader[/\\]/.test(oneOfRule.loader)
67: ) {

If you'd like, I could submit a PR to address this. It looks like there's a few other places this could cause a problem. Pretty much anything that looks for a string in a path could potentially break if it is not bounded by the path separator, just because of how pnpm works

TypeScript Preset 1.2.0 not working w/ HTML framework

After upgrading the TypeScript Preset from 1.1.0 to 1.2.0, we got a lot of errors (unexpected token). The TypeScript code cannot be parsed anymore. You can reproduce by cloning this repository:

• Current version uses 1.1.0 => it works.
• Try to upgrade to 1.2.0 => it fails.

Note that if I uses the 1.1.0 version with the new beta version of Storybook (5.3), it fails as well.

Something is missing from my configuration?

preset-create-react-app yarn workspaces

as part of yarn workspaces i have hoisted all of my dev dependencies to the project root (rather than individual packages. however our storybook build is part of only one of our packages

would it be possible to modify the way that preset-create-react-app consumes scriptsPackageName to not assume process.cwd() when resolving? would be nice to do

scriptsPackageName: '../../../node_modules/.bin/react-scripts'

@storybook/preset-typescript stops CSS imports from working

When I use a custom webpack config with awesome typescript loader all my imports work as expected, however on switching to this typescript preset my build fails and says I need the appropriate loader for css.

Expected behaviour?

preset-scss: default to dart-sass

Dart Sass (sass) has reached great maturity and should start replacing LibSass (node-sass). Until this is considered, Dart Sass can be implemented with the following (in addition to the basic setup):

1. Install Dart Sass

npm install sass --save-dev

2. Update .storybook/presets.js

module.exports = [
  {
    name: '@storybook/preset-scss',
    options: {
      sassLoaderOptions: {
        implementation: require('sass')
      }
    }
  }
];

A note from webpack’s sass-loader documentation regarding the above:

Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, pass the Fiber class to the fiber option.

CRA preset broken on Windows

The preset works fine on macOS, however on Windows met with an error when trying to start-storybook:

ERR! Error: Cannot find module 'C:\Projects\***\node_modules\config\webpack.config'
ERR! Require stack:
ERR! - C:\Projects\***\node_modules\@storybook\preset-create-react-app\index.js
ERR! - C:\Projects\***\node_modules\@storybook\core\dist\server\presets.js
ERR! - C:\Projects\***\node_modules\@storybook\core\dist\server\config.js
ERR! - C:\Projects\***\node_modules\@storybook\core\dist\server\build-static.js
ERR! - C:\Projects\***\node_modules\@storybook\core\server.js
ERR! - C:\Projects\***\node_modules\@storybook\react\dist\server\index.js
ERR! - C:\Projects\***\node_modules\@storybook\react\bin\index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:780:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:685:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:838:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.webpack (C:\Projects\***\node_modules\@storybook\preset-create-react-app\index.js:55:28)
ERR!     at C:\Projects\***\node_modules\@storybook\core\dist\server\presets.js:82:72
ERR!     at async Promise.all (index 1)
ERR!     at async buildDevStandalone (C:\Projects\***\node_modules\@storybook\core\dist\server\build-dev.js:332:9)
ERR!     at async buildDev (C:\Projects\***\node_modules\@storybook\core\dist\server\build-dev.js:411:3)
ERR!  Error: Cannot find module 'C:\Projects\***\node_modules\config\webpack.config'
...

It appears as though getReactScriptsPath() isn't returning what is expected on Windows.

Tested on both Node v10.16.3 and v12.11.1.

Using [email protected].