Compatible with Webpack 5?

[ccreeger]

Hello,

I'm attempting to replace Storyshots with Creevey. When I start up Storybook it fails to launch and I get this error:

/Users/ccreeger/sites/website/node_modules/webpack/lib/DefinePlugin.js:549
						const oldVersion = compilation.valueCacheVersions.get(name);

I have Storybook configured to use Webpack 5. Could that be the problem?

Thanks!

[wKich]

@ccreeger, thanks for your interest. Do you have that error only when starting Creevey? I've made some improvements to allow run Creevey without webpack dependency. I released a new version 0.7.28. Could you try it?

[ccreeger]

I should have been more specific about my problem; sorry about that. I was getting the error after I had added Creevey as an addon to my Storybook main.js file, and then did npm run storybook.

Just in case it was due to all the crazy configuration in our production repo, I decided to give Creevey (0.7.28) another shot with a clean repo. I booted up a blank Next.js project using npx create-next-app and then npx sb init. This time I was pretty successful. Storybook launched and I got the Creevey test runner to launch (creevey --ui).

What you have created is just brilliant. I really like the tight integration with Storybook. I wish I was as smart, though; I'm having a hard time understanding some of the user interface and how I might use it in a production environment (CI, Jenkins, etc). Is there documentation, a tutorial, or a video somewhere that I've overlooked (besides the README.md file)?

[wKich]

Oh, now I understand the issue. My addon adds define plugin to storybook webpack config by using managerWebpack export function. And I don't have any webpack dependencies, Creevey uses the same webpack as installed in your project. And that's why you got that error storybookjs/storybook#14044. The Storybook manager UI supports the only webpack@4 for now and my addon is trying add define plugin from webpack@5.

There is another way to get work Creevey with your project but in that case, you can't run tests directly from storybook UI, only from CLI or Creevey runner will be available. So if it's ok, you'll need to remove creevey addon from main.js file and add this into preview.js file in Storybook config:

import { withCreevey } from 'creevey'

export const decorators = [withCreevey()]

This adds a required helper into Storybook, so Creevey can switch stories and do some other stuff.

What you have created is just brilliant.

Thank you for your kind words. I can't spend full-time working on this project, but I'm trying to do my best. And I have close plans to rework my documentation, again :) where I want to cover the most common scenarios, and I have a plan to write series of articles about screenshot testing and Creevey. Follow me on tweeter to stay in tune https://twitter.com/wkichdev

As for CI configuration, for now, you can check my CI configs in this project. I made them for Github actions, Gitlab, Circle CI and TeamCity. If you miss someone, feel free to ask :)

[ccreeger]

Now following you on Twitter.

Our organization has been using Storyshots for years, but after upgrading to React 17 and Storybook 6, I would really like to drop it in favor of Creevey due to your much simplified approach to installation and configuration.

I totally understand not having a lot of time to work on personal projects; I face the same challenges. As developers we like to write code and not documentation, but it's my opinion that good documentation and code examples are what can really drive adoption of a package.

Cheers!