Storybook: Writing Addons Documention - Still Correct?

[leepowelldev]

I'm working through the writing addons documentation with the most basic example.

https://storybook.js.org/docs/addons/writing-addons/

However, when I start storybook I get the following error which looks like Storybook isn't compiling the code through Webpack:

````
ModuleParseError: Module parse failed: Unexpected token (100:11)
You may need an appropriate loader to handle this file type.
| var render = function render(_ref) {
| var active = _ref.active;

return <MyPanel api={api} active={active} />;

| };
|
`````

Does the documentation need an update to work with v5?

[shilman]

cc @ndelangen

[toazter]

Yeah I'd love to know if the docs are still relevant as well. It seems like they aren't. I'm getting a ton of errors when trying to roll my own add-on. Not to hi-jack the thread but is TS required for add-on dev?

[shilman]

@toazter Addon API is in flux and @ndelangen is actively working on that. He should comment but here's the situation as I understand it:

• There is a v5 API that is currently documented on the site
• There is a new API that was merged yesterday in #5402 along with updates to a lot of the addons

The new API solves a bunch of issues with the v5 API. It's also written in typescript so it provides typings out of the box, but you can still write your addon in JS if you want.

If you're interested in using the new API, I'd probably join the discord and talk to Norbert about it directly.

If you just want to get something working, you should be able to use the docs today modulo any typos.

[stale[bot]]

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!

[shilman]

cc @ndelangen

[taylonr]

If you just want to get something working, you should be able to use the docs today modulo any typos.

Copy & pasting code from this link: https://storybook.js.org/docs/addons/writing-addons/ produces the following error when doing an start-storybook -s ./Images -p 9000 --ci

ModuleParseError: Module parse failed: Unexpected token (92:22)
You may need an appropriate loader to handle this file type.
|       var value = this.state.value;
|       var active = this.props.active;
>       return active ? <div>{value}</div> : null;
|     }
|   }]);

[taylonr]

I had to create a .babelrc and then add this line to it

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

PR created for the documentation: https://github.com/storybooks/storybook/pull/6513

[stale[bot]]

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]]

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!