chromaui / addon-visual-tests

Visual Tests addon for Storybook
MIT License
28 stars 1 forks source link

Take snapshots tries to build-storybook but fails #318

Open jeremydrichardson opened 1 month ago

jeremydrichardson commented 1 month ago

Describe the bug

Bug report

I'm trying to use the Take snapshots feature in Storybook. When I click on the Take snapshots button in the Visual Tests tab of my local Storybook, it attempts to run a build but the build fails. The Chromatic snapshot then fails because it says Invalid Storybook build at ....

I looked through the chromatic.log file and found this command:

npm run build-storybook -- --output-dir /var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--32956-oMzUyWmMULxp

So I enabled the Storybook log and found the following error in build-storybook.log:

> workshop@5.0.0 build-storybook
> storybook build --output-dir /var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--32956-oMzUyWmMULxp

@storybook/cli v8.1.5

info => Cleaning outputDir: ../../../../../../var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--32956-oMzUyWmMULxp
info => Loading presets
info => Building manager..
info => Manager built (106 ms)
info => Building preview..
vite v5.2.11 building for production...
transforming...
✓ 369 modules transformed.
=> Failed to build the preview
RollupError: Expression expected
    at getRollupError (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/parseAst.js:394:41)
    at ParseError.initialise (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
    at convertNode (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
    at convertProgram (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
    at Module.setSource (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:14243:24)
    at async ModuleLoader.addModuleSource (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:18896:13)

Funny thing is if I run that same command manually from the command line it complete fine.

npm run build-storybook -w ./packages/workshop -- --output-dir /var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--32956-oMzUyWmMULxp

The only thing that might be unique about my setup is that we're running Storybook in a monorepo. Not sure if that would have an effect on Rollup having an error.

Thanks

To reproduce

I can't give a link because it's a private repo.

We have Storybook setup in a monorepo where it lives in the /packages/workshop folder. All the stories live in their respective packages in the /packages folder.

Using Vite as our builder.

I'll try and give as much info as a can, though I can't share the repo as it's private and proprietary.

Environment

ghengeveld commented 1 month ago

@jeremydrichardson Could you run this minimal Node script, to check if the problem is how Execa runs that command? I could potentially expose the shell option.

#!/usr/bin/env node

import { execaCommand } from 'execa';

const buildCommand = 'yarn build-storybook'; // use your own

const run = async () => {
  await execaCommand(buildCommand, {
    shell: false,
    preferLocal: true,
    env: { CI: '1', NODE_ENV: 'production' },
    stdout: 'inherit',
    stderr: 'inherit',
  });
};

run();

Save this as run.mjs and run node run.mjs. You probably have to npm install execa first.

When this fails, see what happens when you change the shell and/or preferLocal options.

jeremydrichardson commented 1 month ago

I tried this and it actually succeeded every time.

I added this to the root of the monorepo and changed the buildCommand to npm run build-storybook -w ./packages/workshop

I also tried all the different combinations of shell and preferLocal but I still couldn't get it to fail.

I don't know if this helps, but here is the chromatic.config.json file:

{
  "projectId": "Project:[not shown for this thread]",
  "zip": true,
  "debug": true,
  "storybookBaseDir": "packages/workshop"
}

One question I had is, what is the path that this execa command is run from within Storybook? The only thing I keep coming back to that's different about this repo is that it is a monorepo so maybe the pathing is somehow wrong somewhere? But then that doesn't necessarily make sense because looking at the build-storybook.log file it seems like it's getting through 383 modules and then failing.

ghengeveld commented 1 month ago

Execa runs relative to the current working directory, which is where you started your Storybook.

storybookBaseDir should be relative to your Git repository root regardless of your current working directory, but that config option doesn't affect the Storybook build command anyway.

You could play around with the cwd option.

ghengeveld commented 1 month ago

If you can send us your build-storybook.log via Intercom in our webapp, we can take a closer look. It is pretty suspect that the process only fails after compiling a bunch of modules.

jeremydrichardson commented 1 month ago

Hi @ghengeveld .

I actually embedded the contents of the build-storybook.log in the initial post of this issue.

Let me know if there is anything more I can help with.

ghengeveld commented 3 weeks ago

Hey @jeremydrichardson, sorry for the delay here, and you're right I missed your build log. Nothing really helpful in there unfortunately.

I noticed you didn't specify the version of the VTA you're using. It's installed new Storybook projects but not included in Storybook essentials, and has its own version number (latest is v1.5.0). Could you check your @chromatic-com/storybook version?

jeremydrichardson commented 2 weeks ago

Hi, sorry for the delay.

It's currently at 1.3.3. I can try updating it and see what happens.

jeremydrichardson commented 2 weeks ago

Unfortunately updating to @chromatic-com/storybook 1.5.0 didn't make a difference.

I don't know if this is helpful, but comparing the log from the failed build through Chromatic vs the successful build with build-storybook command, it seems like it misses a couple things in the Chromatic build.

// failed build from within Storybook using Chromatic visual tests feature

> workshop@5.0.0 build-storybook
> storybook build --output-dir /var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--81566-SgwGo1gNhJS2 --webpack-stats-json /var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--81566-SgwGo1gNhJS2

@storybook/cli v8.1.4

info => Cleaning outputDir: ../../../../../../var/folders/sm/zwkg3_xs4l5ch_c4x5c1_1_w0000gq/T/chromatic--81566-SgwGo1gNhJS2
info => Loading presets
info => Building manager..
info => Manager built (116 ms)
info => Building preview..
vite v5.2.11 building for production...
transforming...
✓ 696 modules transformed.
=> Failed to build the preview
RollupError: Expression expected
    at getRollupError (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/parseAst.js:394:41)
    at ParseError.initialise (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:11332:28)
    at convertNode (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:13082:10)
    at convertProgram (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:12399:12)
    at Module.setSource (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:14243:24)
    at async ModuleLoader.addModuleSource (file:///Users/userx/Sites/mm-ui-components/node_modules/rollup/dist/es/shared/node-entry.js:18896:13)
// running `npm run build-storybook`

> workshop@5.0.0 build-storybook
> storybook build

@storybook/cli v8.1.4

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Manager built (123 ms)
info => Building preview..
info Using tsconfig paths for react-docgen
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
[addon-coverage] Adding istanbul plugin to Vite config
vite v5.2.11 building for production...

./sb-common-assets/fonts.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
../../node_modules/acorn-typescript/lib/index.mjs (1:14760): A comment

"/*#__PURE__*/"

in "../../node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
../../node_modules/acorn-typescript/lib/index.mjs (1:16416): A comment

"/*#__PURE__*/"

in "../../node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
../../node_modules/acorn-typescript/lib/index.mjs (1:22232): A comment

"/*#__PURE__*/"

in "../../node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
../../node_modules/telejson/dist/index.mjs (1413:15): Use of eval in "../../node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
../../node_modules/telejson/dist/index.mjs (1416:18): Use of eval in "../../node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 2463 modules transformed.

Couple differences I noted:

Don't know if any of those have significance but maybe will help get us in the right direction?