Add support for `.storybook/main.ts` file #9765

sentilesdal · 2020-02-05T16:29:03Z

Is your feature request related to a problem? Please describe.
The current documentation shows using a main.js file for configuring storybook. However, using a main.ts file is not currently supported which makes importing from other typescript files impossible. Since the new main.js file includes an option to customize the webpack configuration, I'd like to be able to import rules from the project's webpack.config.ts.

Describe the solution you'd like
Support for a main.ts file out of the box.

Describe alternatives you've considered
Currently the other configuration files (addons.ts, config.ts etc) support using typescript). This works for now, but it is hard to find documentation for this old pattern.

Are you able to assist bring the feature to reality?
Possibly, haven't looked into what's necessary to get this to work.

The text was updated successfully, but these errors were encountered:

shilman · 2020-02-05T16:51:58Z

@sentilesdal main.js loading is an iteration on top of preset.js loading, which was originally written by @igor-dv. maybe Igor can help guide you on what might be required here?

sentilesdal · 2020-02-05T17:43:28Z

@shilman, @igor-dv yeah if you could point me in the right direction i could find some time this weekend.

igor-dv · 2020-02-06T11:11:32Z

hey, it's actually possible. check this out #9775

shilman · 2020-02-08T17:49:31Z

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.9 containing PR #9775 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

sentilesdal · 2020-02-10T17:08:40Z

Hey thanks @igor-dv! #9775 gave me enough clues to get it to work for us.

sentilesdal · 2020-02-10T17:10:01Z

@shilman did you mean to reopen this issue?

shilman · 2020-02-10T17:47:10Z

Yeah I think @igor-dv also wanted to make some documentation updates

stale · 2020-03-03T02:57:06Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale · 2020-04-02T03:05:50Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

vasilii-kovalev · 2020-08-09T06:26:04Z

Is there a type for the main.ts config?

Update: I can see the type StorybookConfig in node_modules/@storybook/core/types/index.ts, but it is not possible to import it.
@shilman, could you please make it accessible?

shilman · 2020-08-09T06:40:35Z

Not yet, coming in 6.1 #11843

vasilii-kovalev · 2020-08-09T06:43:22Z

Ok, thanks!

I used require to get the type, but import solved the problem and made it accessible:

import { StorybookConfig } from '@storybook/core/types';

mlshv · 2020-11-20T15:14:00Z

Hi everyone! I've just updated Storybook to 6.1.1 and main.ts doesn't seem to work for me

I have the following error:

yarn run v1.22.4
$ start-storybook -p 6006 -c storybook
info @storybook/react v6.1.1
info 
info => Loading custom manager config
ERR! SyntaxError: /Users/mlshv/code/timestripe-web/frontend/storybook/main.ts: Unexpected token, expected ";" (28:2)
ERR! 
ERR!   26 |         },
ERR!   27 |     },
ERR! > 28 | } as StorybookConfig
ERR!      |   ^
ERR!   29 | 
ERR!   30 | export default config
ERR!   31 | 
ERR!     at Parser._raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:742:17)
ERR!     at Parser.raiseWithData (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:735:17)
ERR!     at Parser.raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:729:17)
ERR!     at Parser.unexpected (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8779:16)
ERR!     at Parser.semicolon (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8761:40)
ERR!     at Parser.parseVarStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11573:10)
ERR!     at Parser.parseStatementContent (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11171:21)
ERR!     at Parser.parseStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11104:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11679:25)
ERR!     at Parser.parseBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11665:10)
ERR!     at Parser.parseTopLevel (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11035:10)
ERR!     at Parser.parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12671:10)
ERR!     at parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12722:38)
ERR!     at parser (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/parser/index.js:54:34)
ERR!     at parser.next (<anonymous>)
ERR!     at normalizeFile (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/transformation/normalize-file.js:93:38)
ERR!  SyntaxError: /Users/mlshv/code/timestripe-web/frontend/storybook/main.ts: Unexpected token, expected ";" (28:2)
ERR! 
ERR!   26 |         },
ERR!   27 |     },
ERR! > 28 | } as StorybookConfig
ERR!      |   ^
ERR!   29 | 
ERR!   30 | export default config
ERR!   31 | 
ERR!     at Parser._raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:742:17)
ERR!     at Parser.raiseWithData (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:735:17)
ERR!     at Parser.raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:729:17)
ERR!     at Parser.unexpected (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8779:16)
ERR!     at Parser.semicolon (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8761:40)
ERR!     at Parser.parseVarStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11573:10)
ERR!     at Parser.parseStatementContent (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11171:21)
ERR!     at Parser.parseStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11104:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11679:25)
ERR!     at Parser.parseBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11665:10)
ERR!     at Parser.parseTopLevel (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11035:10)
ERR!     at Parser.parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12671:10)
ERR!     at parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12722:38)
ERR!     at parser (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/parser/index.js:54:34)
ERR!     at parser.next (<anonymous>)
ERR!     at normalizeFile (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/transformation/normalize-file.js:93:38) {
ERR!   loc: Position { line: 28, column: 2 },
ERR!   pos: 772,
ERR!   code: 'BABEL_PARSE_ERROR'
ERR! }

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

It seems like Babel tries to transpile main.ts as if it were main.js file. What am i doing wrong?

vasilii-kovalev · 2020-11-20T17:13:08Z

Hi everyone! I've just updated Storybook to 6.1.1 and main.ts doesn't seem to work for me

I have the following error:

yarn run v1.22.4
$ start-storybook -p 6006 -c storybook
info @storybook/react v6.1.1
info 
info => Loading custom manager config
ERR! SyntaxError: /Users/mlshv/code/timestripe-web/frontend/storybook/main.ts: Unexpected token, expected ";" (28:2)
ERR! 
ERR!   26 |         },
ERR!   27 |     },
ERR! > 28 | } as StorybookConfig
ERR!      |   ^
ERR!   29 | 
ERR!   30 | export default config
ERR!   31 | 
ERR!     at Parser._raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:742:17)
ERR!     at Parser.raiseWithData (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:735:17)
ERR!     at Parser.raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:729:17)
ERR!     at Parser.unexpected (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8779:16)
ERR!     at Parser.semicolon (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8761:40)
ERR!     at Parser.parseVarStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11573:10)
ERR!     at Parser.parseStatementContent (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11171:21)
ERR!     at Parser.parseStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11104:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11679:25)
ERR!     at Parser.parseBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11665:10)
ERR!     at Parser.parseTopLevel (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11035:10)
ERR!     at Parser.parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12671:10)
ERR!     at parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12722:38)
ERR!     at parser (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/parser/index.js:54:34)
ERR!     at parser.next (<anonymous>)
ERR!     at normalizeFile (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/transformation/normalize-file.js:93:38)
ERR!  SyntaxError: /Users/mlshv/code/timestripe-web/frontend/storybook/main.ts: Unexpected token, expected ";" (28:2)
ERR! 
ERR!   26 |         },
ERR!   27 |     },
ERR! > 28 | } as StorybookConfig
ERR!      |   ^
ERR!   29 | 
ERR!   30 | export default config
ERR!   31 | 
ERR!     at Parser._raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:742:17)
ERR!     at Parser.raiseWithData (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:735:17)
ERR!     at Parser.raise (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:729:17)
ERR!     at Parser.unexpected (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8779:16)
ERR!     at Parser.semicolon (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:8761:40)
ERR!     at Parser.parseVarStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11573:10)
ERR!     at Parser.parseStatementContent (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11171:21)
ERR!     at Parser.parseStatement (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11104:17)
ERR!     at Parser.parseBlockOrModuleBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11679:25)
ERR!     at Parser.parseBlockBody (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11665:10)
ERR!     at Parser.parseTopLevel (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:11035:10)
ERR!     at Parser.parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12671:10)
ERR!     at parse (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/parser/lib/index.js:12722:38)
ERR!     at parser (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/parser/index.js:54:34)
ERR!     at parser.next (<anonymous>)
ERR!     at normalizeFile (/Users/mlshv/code/timestripe-web/frontend/node_modules/@babel/core/lib/transformation/normalize-file.js:93:38) {
ERR!   loc: Position { line: 28, column: 2 },
ERR!   pos: 772,
ERR!   code: 'BABEL_PARSE_ERROR'
ERR! }

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

It seems like Babel tries to transpile main.ts as if it were main.js file. What am i doing wrong?

Experienced something similar. Tried to put tsconfig.json in .storybook folder, but didn't help.

barinbritva · 2021-03-19T13:14:21Z

To run main.ts it's necessary to compile it first. If not, ts-node will help. I installed it and everything became OK.
Maybe they just forgot to add ts-node to dependencies?

shilman · 2021-03-19T14:02:39Z

@barinbritva it should work automatically in 6.2.0-rc.x

npx sb upgrade --prerelease

stefanprobst · 2021-03-19T17:34:24Z

i'm getting SyntaxError: Unexpected token 'export' with v6.2.0-rc.4 - could you link to a working example @shilman thanks!

shilman · 2021-03-20T03:02:48Z

@stefanprobst from inside the storybook monorepo in the examples directory:

MMBP15:examples shilman$ ls */main.ts */.storybook/main.ts
cra-ts-kitchen-sink/.storybook/main.ts	react-ts-webpack4/main.ts
official-storybook/main.ts		react-ts/main.ts

barinbritva · 2021-03-21T09:54:40Z

@shilman, thanks I'll try.

But I just copied content of examples/react-ts-webpack4 folder and tried to launch it. I was supposed to manually add cross-env and ts-node dependencies. After doing that, everything works.

shilman added configuration core feature request labels Feb 5, 2020

igor-dv mentioned this issue Feb 6, 2020

Examples: Change main.js to main.ts to show it's possible #9775

Merged

shilman closed this as completed Feb 8, 2020

shilman reopened this Feb 8, 2020

shilman assigned igor-dv Feb 10, 2020

stale bot added the inactive label Mar 3, 2020

stale bot closed this as completed Apr 2, 2020

TheKnarf mentioned this issue May 27, 2020

TypeScript addons #10938

Closed

rabelloo mentioned this issue Jul 30, 2020

.storybook/main.ts file only works if @storybook/addon-essentials is installed #11739

Closed

simonwep mentioned this issue Sep 16, 2021

Document using typescript for storybook configuration files #16079

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for `.storybook/main.ts` file #9765

Add support for `.storybook/main.ts` file #9765

sentilesdal commented Feb 5, 2020

shilman commented Feb 5, 2020

sentilesdal commented Feb 5, 2020

igor-dv commented Feb 6, 2020

shilman commented Feb 8, 2020

sentilesdal commented Feb 10, 2020 via email •

edited

Loading

sentilesdal commented Feb 10, 2020

shilman commented Feb 10, 2020

stale bot commented Mar 3, 2020

stale bot commented Apr 2, 2020

vasilii-kovalev commented Aug 9, 2020 •

edited

Loading

shilman commented Aug 9, 2020

vasilii-kovalev commented Aug 9, 2020 •

edited

Loading

mlshv commented Nov 20, 2020

vasilii-kovalev commented Nov 20, 2020

barinbritva commented Mar 19, 2021

shilman commented Mar 19, 2021 •

edited

Loading

stefanprobst commented Mar 19, 2021

shilman commented Mar 20, 2021

barinbritva commented Mar 21, 2021

Add support for .storybook/main.ts file #9765

Add support for .storybook/main.ts file #9765

Comments

sentilesdal commented Feb 5, 2020

shilman commented Feb 5, 2020

sentilesdal commented Feb 5, 2020

igor-dv commented Feb 6, 2020

shilman commented Feb 8, 2020

sentilesdal commented Feb 10, 2020 via email • edited Loading

sentilesdal commented Feb 10, 2020

shilman commented Feb 10, 2020

stale bot commented Mar 3, 2020

stale bot commented Apr 2, 2020

vasilii-kovalev commented Aug 9, 2020 • edited Loading

shilman commented Aug 9, 2020

vasilii-kovalev commented Aug 9, 2020 • edited Loading

mlshv commented Nov 20, 2020

vasilii-kovalev commented Nov 20, 2020

barinbritva commented Mar 19, 2021

shilman commented Mar 19, 2021 • edited Loading

stefanprobst commented Mar 19, 2021

shilman commented Mar 20, 2021

barinbritva commented Mar 21, 2021

Add support for `.storybook/main.ts` file #9765

Add support for `.storybook/main.ts` file #9765

sentilesdal commented Feb 10, 2020 via email •

edited

Loading

vasilii-kovalev commented Aug 9, 2020 •

edited

Loading

vasilii-kovalev commented Aug 9, 2020 •

edited

Loading

shilman commented Mar 19, 2021 •

edited

Loading