non-legacy `withScreenshot` decorator stopped working after 4.3.0 about storycap HOT 11 CLOSED

@Quramy
I think I have managed to add an example for testing the given environment in #857, and also fix the issue.
Please take a look and see if this should resolve the issue when you have time 🙏

from storycap.

I was facing the same situation with @alejandrofdiaz. In my case, 5.0.0-alpha.0 worked with [email protected] 👍

from storycap.

I think this issue is due to not considering bundling these require expressions procedure by Rollup . @indigolain Do you have any idea to solve this?

📝

I got the following js, which is built by build-storybook via vite ( I cropped and formatted manually before paste)

try {
  a = require("@storybook/addons").makeDecorator;
} catch {}
try {
  a = require("@storybook/preview-api").makeDecorator; // Not resolved 
} catch {}

And build-storybook via webpack5 builds the following:

      let makeDecorator;
      try {
        makeDecorator = Object(
          (function webpackMissingModule() {
            var e = new Error("Cannot find module '@storybook/addons'");
            throw ((e.code = "MODULE_NOT_FOUND"), e);
          })()
        );
      } catch {}
      try {
        makeDecorator = __webpack_require__(
          "@storybook/preview-api"
        ).makeDecorator;
      } catch {}

from storycap.

@alejandrofdiaz

Maybe this MR makes sense, to avoid conditional imports on the withScreenshot decorator.

I mentioned the differential require expressions issue to #860.

And I've changed to remove require('@storybook/addons') .
https://github.com/reg-viz/storycap/blob/next/packages/storycap/src/client/with-screenshot.ts

I published the above version as [email protected] . Please try this version.

from storycap.

I confirm that Storycap 5 works with Storybook 8 and Vite + React config.
Thanks folks 👍

from storycap.

@indigolain
Hi, I just made a reproduction. Please feel free to use this: https://github.com/ysgk/storycap-4.3-issue

from storycap.

@ysgk
Thanks for helping out! I'll take a look and maybe use some parts to create a repro myself!

from storycap.

Thanks to address it so quickly. I updated the previous mentioned project to Storybook 8.0.4 and Storycap 4.3.1 but errors still persist.

When running the development server everything runs smoothly but when Storybook is built in statics at it runs on a HTTP server the error persist, now console reports the following:

runtime.js:4 ReferenceError: require is not defined
    at preview-N83TnhaG.js:592:31
runtime.js:118 Uncaught (in promise) ReferenceError: require is not defined
    at preview-N83TnhaG.js:592:31

and preview-N83TnhaG.js:592:31 refers to the asset containing the decorator:

const { triggerScreenshot } = require("./trigger-screenshot");

AFAIK ESM modules should import things using import foo from 'bar' syntax, and the Storycap bundled assets are converted to const module = require('bar') instead. Is there probably an issue while transpiling with Vite?

Maybe this MR makes sense, to avoid conditional imports on the withScreenshot decorator.

I've moved the decorator instantiation to my project and it works as expected:

import { makeDecorator } from "@storybook/preview-api";

import { triggerScreenshot } from "../node_modules/storycap/lib-esm/client/trigger-screenshot";

export const withScreenshot = makeDecorator({
  name: "withScreenshot",
  parameterName: "screenshot",
  skipIfNoParametersOrOptions: false,
  wrapper: (getStory, context, { parameters, options }) => {
    if (
      typeof process !== "undefined" &&
      process?.env.JEST_WORKER_ID !== undefined
    ) {
      return getStory(context);
    }
    const screenshotOptions = parameters || options;
    triggerScreenshot(screenshotOptions, context);
    return getStory(context);
  },
});

from storycap.

Thank you for reporting the issue!
I'm not too familiar with how Rollup's bundler works, but can it be solved by something like this: #857

Also, if this doesn't work, are there any branches or repos I could debug around 🙏 ?

from storycap.

Ah, I see, you mean how to debug storycap build itself. Please disregard my above comment 🙏

from storycap.

Same problem with the recent version here

from storycap.