DEV Community

Cover image for Setting up Storybook for Preact

Setting up Storybook for Preact

Nick Taylor on September 02, 2018

Update 2019/06/30: Storybook now has an option via the CLI to install for Preact. For more info see Preact for Storybook.TLDR npx -p @storybook/cli...
Read full post
Collapse
 
ridermansb profile image
Riderman de Sousa Barbosa •

:( not work for me..

Module build failed: SyntaxError: Unexpected token (7:61)

  5 | import Header from './Header';
  6 |
> 7 | storiesOf('<Header> component', module).add('default', () => <Header />);

I used preact/cli.. don't know if this make difference

Collapse
 
nickytonline profile image
Nick Taylor •

Could be... It sounds like your error though is that the file can't compile jsx, i.e. <Header />

Collapse
 
maxart2501 profile image
Massimo Artizzu •

That's unfortunate that we have to do this extra job for Preact, but on the other hand things could change soon.
Yes, presets seem an adequate solution, of course a CLI version would be the best.

(Of topic, you might want to change the "font" of your name and bio. While Unicode abuse seems fun, some screen readers utter those words letter by letter.)

Collapse
 
nickytonline profile image
Nick Taylor •

It's actually no longer the case. They now have an option via the CLI for Preact. For more info see Preact for Storybook.

Collapse
 
nickytonline profile image
Nick Taylor •

@_developit pointed out that this setup uses webpack 3.

I'll add a section some time later this week about webpack 4.