Giter Site home page Giter Site logo

Compatible with Webpack 5? about creevey HOT 4 CLOSED

creevey avatar creevey commented on May 26, 2024
Compatible with Webpack 5?

from creevey.

Comments (4)

ccreeger avatar ccreeger commented on May 26, 2024 1

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

from creevey.

ccreeger avatar ccreeger commented on May 26, 2024 1

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!

from creevey.

wKich avatar wKich commented on May 26, 2024

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

from creevey.

wKich avatar wKich commented on May 26, 2024

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 :)

from creevey.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.