Comments (17)
It looks to me like the problem is with the underlying webpack config. Running npx start-storybook --debug-webpack
when presets.js only has module.exports = ["@storybook/preset-typescript"];
produces the following:
// ...
{
test: /\.tsx?$/,
use: [
{
loader: '/Users/joe/Projects/test/node_modules/ts-loader/index.js',
options: { transpileOnly: true }
},
{
loader: '/Users/joe/Projects/test/node_modules/react-docgen-typescript-loader/dist/index.js',
options: {}
}
],
include: []
},
// ...
Notice the empty include
array. But, if you change presets.js such that include
is specified...
const path = require("path");
module.exports = [
{
name: "@storybook/preset-typescript",
options: {
include: [
path.resolve(__dirname, "../src"),
path.resolve(__dirname, "../stories")
]
}
}
];
... everything works as expected and the relevant portion of the webpack config has the correct include directive:
// ...
{
test: /\.tsx?$/,
use: [
{
loader: '/Users/joe/Projects/test/node_modules/ts-loader/index.js',
options: { transpileOnly: true }
},
{
loader: '/Users/joe/Projects/test/node_modules/react-docgen-typescript-loader/dist/index.js',
options: {}
}
],
include: [
'/Users/joe/Projects/test/src',
'/Users/joe/Projects/test/stories'
]
},
// ...
Just for the sake of comparison, I checked the generated webpack config in a CRA project and found that it's using this:
// ...
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: [
'/Users/joe/Projects/cra-test/src',
'/Users/joe/Projects/cra-test/.storybook'
],
// ...
I'm not sure why the include
array is empty when the directions for installing this preset are followed as published, but I'm reasonably sure that's the issue.
from presets.
Trying to integrate Storybook as a part of a TSDX component library.
Steps I took:
-
npx -p @storybook/cli sb init --type react
-
yarn add -D @storybook/preset-typescript react-docgen-typescript-loader ts-loader fork-ts-checker-webpack-plugin
-
Convert
.storybook/main.js
to:
module.exports = {
stories: ['../src/components/**/*.stories.(tsx|mdx)'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
presets: ['@storybook/preset-typescript'],
};
- Created the following
Button.stories.tsx
withinsrc/components/Button/__stories__/
:
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '../';
export default {
title: 'Button',
component: Button,
};
export const WithRequiredProps = () => (
<Button onClick={action('clicked')}>Click me!</Button>
);
After I run, yarn storybook
, I get the following:
I ditched the preset and got everything working with this:
-
npx -p @storybook/cli sb init --type react
-
yarn add -D yarn add -D awesome-typescript-loader @storybook/addon-info react-docgen-typescript-loader
-
.storybook/main.js
:
module.exports = {
stories: ['../src/**/*.stories.(tsx|mdx)'],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
},
{
loader: require.resolve('react-docgen-typescript-loader'),
},
],
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};
from presets.
Hi have the same issue, however the tsconfig file did not work for me. We keep our stories in folders in with the component, would this make a difference? Below is a the error, looks like nothing is being transpiled using this preset.
from presets.
This should be improved when v6 is released 🙏
from presets.
I'm having the same issue, tried from scratch a few times, but having the same issue that @daraclare has.
from presets.
from presets.
I was gonna create a fork and throw up a pull request for this, but it looks like that's already being addressed by @T0MASD in #83 👍
from presets.
@rpolonsky what happens when you name that 0-Welcome.stories.tsx
?
from presets.
I'm running into the same problem. Changing the extensions from .ts
to .tsx
did not solve the issue.
I was trying to create the smallest reproduction inside of a Next.js app. I think the issue stems from an incompatible tsconfig.json
. And since the documentation doesn't hint at the necessary configuration options, Storybook fails to transpile the Typescript code.
For reference, here is my tsconfig.json
that works:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react"
},
"include": ["src", "stories"]
}
A few notes:
"jsx"
is set to"react"
and not"preserve"
- Although I am trying to setup within a Next.js app, I stole this config file from create-react-app's
tsconfig.json
- I changed the value of
"noEmit"
fromtrue
tofalse
- I appended
"stories"
to the"include"
array For the demo to work, I needed to supply custom type definitions for theIt was caused by the'@storybook/react/demo'
components - as TS complained. However, this is likely due to the"strict"
option beingtrue
"strict"
option.
from presets.
@adam-beck Thanks for the thorough diagnosis! 🙌 How would you recommend improving the docs for your use case?
from presets.
For starters, it might be best to ensure that the tsconfig.json
file that comes with the preset works (without error) for a clean (i.e. npx -p @storybook/cli sb init
) Storybook setup. Since it uses the rule "noImplicitAny": true,
, it fails to compile since there are no typings for the demo components. Either the typings should be generated or the rule should be toggled to false
. I think the former would be the ideal solution but the latter would be much easier.
The documentation could also mention which configuration options are absolutely necessary such as "jsx": "react"
. The smallest tsconfig.json
I could create and still get it to work is:
{
"compilerOptions": {
"module": "es6",
"jsx": "react",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
}
}
It may be worthwhile to mention that those need to be set as is.
Other than that, though, it's hard because each project has a unique tsconfig.json
. It would be impractical to include even a fraction of the scenarios. I would suggest advising that
- any existing
tsconfig.json
will likely need to be overridden & include an example of doing so (it sort of already does this) - explain that if the application already has a
.storybook/config.js
it will need to be changed to search for.tsx?
files
Edit: It looks like the demo components have typings already! I'm not sure why they aren't being picked up though. After searching, it looks like this has already been fixed too!
from presets.
Looks like include
defaults to an empty array here: https://github.com/storybookjs/presets/blob/master/packages/preset-typescript/index.js#L9
If we can take a note from CRA, maybe it could default to something more like this:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
...
include = [
resolveApp('src'),
resolveApp('stories'),
resolveApp('.storybook')
]
from presets.
@wollardj I struggled trying to get this to work for a long time before I found this issue. Setting options.include
on the @storybook/preset-typescript
plugin did the trick. Thank you!
from presets.
Looks like
include
defaults to an empty array here: https://github.com/storybookjs/presets/blob/master/packages/preset-typescript/index.js#L9If we can take a note from CRA, maybe it could default to something more like this:
const appDirectory = fs.realpathSync(process.cwd()); const resolveApp = relativePath => path.resolve(appDirectory, relativePath); ... include = [ resolveApp('src'), resolveApp('stories'), resolveApp('.storybook') ]
Good catch! I had been frustrated with this for a while, but setting these in options.include
on the preset, as @kevinbarabash said, fixed it for me. Thanks!
from presets.
I spend two work day for solve this issue. Then finally i solved it. Here is my solution step by step:
First, i follow the for installing storybook Then i look up for typescript/cra support. doc
They are recommend @storybook/preset-create-react-app to use preset for CRA (also support typescript/cra). There is no much config, the project directly started BUT when i change the file extension (.js to .tsx) i faced that error.
- I install the ts-loader Setting up TypeScript with ts-loader
- Edit
storybook/main.js
Setting up TypeScript with babel-loader
module.exports = {
stories: ['../src/components/**/*.stories.tsx'],
webpackFinal: config => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [['react-app', { flow: false, typescript: true }]],
}
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
};
stories: ['../src/components/**/*.stories.tsx'],
Note: Stories path can change. Each story placed inside the component folder
Then Install following packages:
npm install --save-dev babel-loader babel-preset-react-app
- Start App
npm run storybook
Then i faced new error:
Problem is resolve path alias. You can solve this error like that:
import Text from 'components/text';
to import Text from '../../text';
But i don't want to do that. That's why i add that config to .storybook/main.js
:
resolve: {
alias: {
components: path.resolve(__dirname, '../src/components'),
styles: path.resolve(__dirname, '../src/styles'),
}
}
Note: There is no tricky things. I just follow the manual installation on storybook.
By the way, thanks for this beautiful project.
from presets.
@kylemh was it? I'm trying to get everything working but things blow up when I add @storybook/preset-typescript
from presets.
in v6, typescript support is internal
you're not meant to use the preset
https://storybook.js.org/docs/react/configure/typescript
from presets.
Related Issues (20)
- [Bug] CRA does not print eslint errors to terminal anylonger
- [Bug] CRA preset does not support ES2020 dependencies HOT 2
- Where are the tests for your presets?
- V3.2.0 works but V4.0.0 does not HOT 4
- [Bug] preset-create-react-app: Storybook config dir webpack override breaks default CRA config
- [Bug] Install @storybook/preset-scss with default storybook's bundler 'webpack4' doesn't works HOT 5
- [Bug] CRA5, [email protected] HOT 6
- [Bug] Fails in case of using custom folder structure inside /src
- [Help] Cannot find module '@babel/plugin-proposal-private-property-in-object'
- @storybook/preset-create-react-app 4.0.1 breaks Storybook HOT 4
- [Bug]: macos - Error: Cannot find module '.../node_modules/config/webpack.config' HOT 5
- [Bug] URL from readme does not exist on the website
- [Bug] ENAMETOOLONG on "preset-create-react-app@4" package installation HOT 1
- [Bug] start-storybook breaks when tsconfig.json has comments (preset-create-react-app)
- [Bug] Package dependency HOT 4
- [Bug] Confusing error message when stories folder is outside of src.
- [Bug] cannot run storybook with CRA preset version 4.1.0. HOT 1
- @storybook/react-docgen-typescript-plugin canary dependency
- [Bug] Storybook preset function `getReactScriptsPath` has bug HOT 2
- Missing license file
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from presets.