chromaui/chromatic-cli

Error when initializaing/extracting storybook

Closed this issue · 5 comments

KonstantinSimeonov commented 
Error: Error: page.evaluate: Error: Failed to initialize Storybook.

Do you have an error in your `preview.js`? Check your Storybook's browser console for errors.
    at PreviewWeb.extract (https://5fd258d324cc620021b8062c-kiqkvfmxpn.capture-loopback.chromatic.com/sb-preview/runtime.js:101:5390)
    at extractStoryData (eval at evaluate (:192:30), <anonymous>:243:29)
    at UtilityScript.evaluate (<anonymous>:194:17)
    at UtilityScript.<anonymous> (<anonymous>:1:44)
    → Failed to publish build
ℹ Wrote Chromatic diagnostics report to chromatic-diagnostics.json
 ELIFECYCLE  Command failed with exit code 23.

Environment:

node: 20.10.0
platform: linux/macos/cimg-node:20.10.0
storybook: 7.5.3
chromatic: 7.1.0

We're running into this issue consistently every build/run. It suddenly started failing yesteday.
Here's a storybook deployment that loads without any errors in chrome, but fails with the error above when ran in chromatic: https://5fd258d324cc620021b8062c-joqrmlnqzp.chromatic.com/ . Our storybook builds seem to all run fine in the browser.

What we've tried (but got the same error):

  • bump storybook to latest
  • bump chromatic to latest
  • comment out custom code in .storybook/preview.tsx
  • no sourcemaps
  • no storybook addons
  • no turbosnap
  • try 50/100 hundred commits in the past
  • run with just one story (Login.stories.tsx)
Vite config 
import fs from "node:fs/promises";
import { createRequire } from "node:module";
import path from "node:path";
import url from "node:url";

import react from "@vitejs/plugin-react";
import { defineConfig, loadEnv, PluginOption } from "vite";
import viteTsconfigPaths from "vite-tsconfig-paths";

enum TargetBundle {
  PsPDFKit = "vendor-pspdfkit",
  Vendor = "vendor",
}

const splitOffBigChunks = (moduleUrl: string): TargetBundle | undefined => {
  if (moduleUrl.includes("node_modules")) {
    return moduleUrl.includes("pspdfkit")
      ? TargetBundle.PsPDFKit
      : TargetBundle.Vendor;
  }
};

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  const envWithProcessPrefix = Object.entries(env).reduce(
    (prev, [key, val]) => {
      return {
        ...prev,
        ["process.env." + key]: `"${val}"`,
      };
    },
    {}
  );

  return {
    define: envWithProcessPrefix,
    optimizeDeps: {
      include: [
        "@loancrate/schema-json",
        "@loancrate/gql",
        "@loancrate/shared/*",
        "@loancrate/validation-rules",
      ],
    },
    plugins: [viteTsconfigPaths(), react(), reactVirtualized()],
    build: {
      sourcemap: true,
      commonjsOptions: {
        include: [
          /schema-json/,
          /gql/,
          /shared/,
          /validation-rules/,
          /node_modules/,
        ],
      },
      rollupOptions: {
        output: {
          manualChunks: splitOffBigChunks,
        },
      },
    },
  };
});

const WRONG_CODE =
  'import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";';

function reactVirtualized(): PluginOption {
  return {
    name: "flat:react-virtualized",
    configResolved: async () => {
      const require = createRequire(import.meta.url);
      const reactVirtualizedPath = require.resolve("react-virtualized");
      const { pathname: reactVirtualizedFilePath } = new url.URL(
        reactVirtualizedPath,
        import.meta.url
      );
      const file = reactVirtualizedFilePath.replace(
        path.join("dist", "commonjs", "index.js"),
        path.join("dist", "es", "WindowScroller", "utils", "onScroll.js")
      );
      const code = await fs.readFile(file, "utf-8");
      const modified = code.replace(WRONG_CODE, "");
      await fs.writeFile(file, modified);
    },
  };
}
Storybook config 
import assert from "assert";
import { resolve } from "path";

import { StorybookConfig } from "@storybook/react-vite";
import { ConfigEnv, loadConfigFromFile, mergeConfig } from "vite";
import turbosnap from "vite-plugin-turbosnap";
import viteTsconfigPaths from "vite-tsconfig-paths";

const storybookConfig: StorybookConfig = {
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  staticDirs: ["../public"],
  addons: ["@storybook/addon-essentials"],
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    const project = await loadConfigFromFile(
      config as ConfigEnv,
      resolve(__dirname, "../vite.config.ts")
    );

    assert(project, `Couldn't load config`);

    return mergeConfig(config, {
      ...project.config,
      plugins: [
        viteTsconfigPaths(),
        turbosnap({ rootDir: config.root || process.cwd() }),
      ],
      build: {
        ...project.config.build,
        sourcemap: !process.env.CI,
      },
    });
  },
  docs: {
    autodocs: true,
  },
};

export default storybookConfig;
TSConfig 
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "target": "ES2021",
    "lib": ["dom", "dom.iterable", "ES2021"],
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    // https://www.typescriptlang.org/tsconfig#module
    "module": "ES2020",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/"
  },
  "include": ["src", "vite.config.ts"]
}

Here's the diagnostics json
chromatic-diagnostics.json

thafryer commented

@KonstantinSimeonov Thanks for reporting this issue. Can you email us via support@chromatic.com? So, that we can diagnose the issue further.

  • ❤️2
KonstantinSimeonov commented

The issue got resolved for us after talking to support@chromatic.com. Thank you @thafryer!

mabernethy commented

Can you drop the details on what you did to fix it @KonstantinSimeonov ?

KonstantinSimeonov commented

@mabernethy We didn't do anything in particular - I sent the output of

npx chromatic --project-token YOUR_TOKEN --debug --diagnostics

(both the command line output and the json diagnostics) to support at support@chromatic.com. After a day or two we got contacted that the issue should be resolved without us changing our current setup.

mabernethy commented