Storybook: Add support for `.storybook/main.ts` file

Created on 5 Feb 2020  路  14Comments  路  Source: storybookjs/storybook

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.

configuration core feature request inactive
Source
picture sentilesdal
👍7

Most helpful comment

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.

picture shilman on 8 Feb 2020
👍4

All 14 comments

@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?

shilman picture shilman on 5 Feb 2020

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

sentilesdal picture sentilesdal on 5 Feb 2020

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

igor-dv picture igor-dv on 6 Feb 2020
👍1

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.

shilman picture shilman on 8 Feb 2020
👍4

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

sentilesdal picture sentilesdal on 10 Feb 2020

@shilman did you mean to reopen this issue?

sentilesdal picture sentilesdal on 10 Feb 2020

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

shilman picture shilman on 10 Feb 2020
👍1

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[bot] picture stale[bot] on 3 Mar 2020

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!

stale[bot] picture stale[bot] on 2 Apr 2020

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?

vasilii-kovalev picture vasilii-kovalev on 9 Aug 2020

Not yet, coming in 6.1 #11843

shilman picture shilman on 9 Aug 2020

Ok, thanks!

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

import { StorybookConfig } from '@storybook/core/types';
vasilii-kovalev picture vasilii-kovalev on 9 Aug 2020

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?

mlshv picture mlshv on 20 Nov 2020
👍1

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.

vasilii-kovalev picture vasilii-kovalev on 20 Nov 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wahengchang picture wahengchang  路  3Comments
ZigGreen picture ZigGreen  路  3Comments
rpersaud picture rpersaud  路  3Comments
purplecones picture purplecones  路  3Comments
arunoda picture arunoda  路  3Comments