storybookjs / presets Goto Github PK
View Code? Open in Web Editor NEW🧩 Presets for Storybook
License: MIT License
🧩 Presets for Storybook
License: MIT License
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:
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]' }
}
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) => (
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?
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?
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?
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
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.
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
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
preset-typescript
)Presets reference docs here: https://storybook.js.org/docs/presets/introduction/
I use @storybook/preset-create-react-app, and I want to add an alias to the webpack configuration.
What should I do?
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"
}
},
...
]
I download the cra-ts example and run :
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.
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.
.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-*
?
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]
.
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):
npm install sass --save-dev
.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 theFiber
class to thefiber
option.
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?
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
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
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.
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',
},
},
},
},
]
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:
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
☝️
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?
Tasks:
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.
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:
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?
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"
}
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
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 :)
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?
preset-create-react-app
should support Storybook Docs MDX out of the box. The old built-in preset does.
.storybook/config.ts
to load MDX filessrc/stories/Test.stories.mdx
fileimport { configure } from "@storybook/react";
// automatically import all files ending in *.stories.(tsx|jsx)
configure(
require.context("../src/stories", true, /\.stories\.(mdx|[tj]sx?)$/),
module
);
import { Meta } from "@storybook/addon-docs/blocks";
<Meta title="Test" />
Here's some _markdown_!
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.
When I remove the CRA preset, the Docs preset works again
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.
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
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.
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? 🤔
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:
git clone https://github.com/joshuawootonn/presets.git
cd /presets/examples/cra-ts
yarn
yarn start
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)
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'
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
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?
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.
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
react-docgen-typescript-loader
. Covers #21.@storybook/react
to remove built-in preset.
init
, this preset should be installed if the app matches the criteria.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.
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.
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?
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.*)
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
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?
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.
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.
We get a lot of issues relating to inline SVGs. Anybody want to write a preset for it? See e.g.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.