React-transition-group: Error on `yarn run storybook`

[SeanSilke]

yarn run storybook leads to error TypeError: plugins.extractText is not a function
and storybook did not start.

[silvenon]

What is your version of Node? I'm getting errors for JSX and class properties, which also prevents the stories from rendering, but I'm curious about where your error is coming from.

[SeanSilke]

@silvenon node version is v8.11.3

[MannyC]

Yeah, storybook isn't working at all for me.

I did some investigation but ended up giving up. Basically, the react-transition-group storybook isn't compatible with webpack 4, but the project itself has been bumped to use 4.

plugins.extractText seems to have been removed form webpack-atoms, probably because it wasn't compatable with webpack 4 ( see here ). You can alter RTG to use extract-text-webpack-plugin directly, although they actually recommend using mini-css-extract-plugin instead for webpack 4 so I tried that. That errored out for me, and because I don't know where all this is sitting within the overall project, I just left it.

edit:

~$ node --version
v10.6.0

[silvenon]

@jquense do you use Storybook when developing react-transition-group? I stopped using it a long time ago in general because I find it to be too much of a hassle, I just use yarn link instead. But I can try to revive Storybook if you think it's a good idea to keep it. Otherwise we could delete it.

[jquense]

I use use it just to verify stuff when i do local dev yeah. Its really not important tho to fix, or rather i should fix it since i'm the one that uses it. I don't want to remove it tho since it's got some useful examples of use that may be broadly interesting

[pajtai]

Is there an alternative way to look at demos? I couldn't get it to run either.

[pajtai]

To answer my own question and to others for reference, the docs have codebox examples.

So each of the following pages lets you see the transitions and play with them:

1. http://reactcommunity.org/react-transition-group/transition/
2. http://reactcommunity.org/react-transition-group/css-transition/
3. http://reactcommunity.org/react-transition-group/transition-group/

[cabinhero]

OK, I found a method to walk around the error, That's just remove the code like this.

[emwalker]

If the storybook is broken and a "wontfix," perhaps a documentation update to remove the reference to the storybook?

[silvenon]

Works now 👍