addon-visual-tests
addon-visual-tests copied to clipboard
chromaui
Take snapshots tries to build-storybook but fails
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:
> [email protected] 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..
[36mvite v5.2.11 [32mbuilding for production...[36m[39m
transforming...
[32m✓[39m 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
- OS: macOs 14.5
- Browser: Chrome 125.0.6422.141
- Storybook: 8.1.4
- Visual Test addon version: isn't this just bundled with Storybook now? so assume 8.1.4
@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.
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.
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.
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.
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.
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?
Hi, sorry for the delay.
It's currently at 1.3.3. I can try updating it and see what happens.
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
> [email protected] 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`
> [email protected] 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:
- No
Using tsconfig paths for react-docgen - No warnings about
acorn-typescript - It seems to transform 696 modules in the failed build vs 2463 in the successful build
Don't know if any of those have significance but maybe will help get us in the right direction?
I might have a similar issue. We are using Storybook in a React monorepo. When I press the Take Snapshots button the build also fails. The error is different than that of topic opener though, we get a Webpack error:
` Command failed with exit code 1: yarn run build-storybook --output-dir=C:blablabla error Command failed with exit code 1.
i Build command:
yarn run build-storybook --output-dir=C:\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR --webpack-stats-json=C:\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR
i Runtime metadata:
{
"nodePlatform": "win32",
"nodeVersion": "18.20.4",
"packageManager": "yarn",
"packageManagerVersion": "1.22.22"
}
i Storybook build output:
C:\Projects\kvk-design-system\build-storybook.log
$ storybook build --output-dir=C:\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR --webpack-stats-json=C:\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR
@storybook/core v8.4.7
info => Cleaning outputDir: ..\..\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR
info => Loading presets
info => Building manager..
info => Manager built (331 ms)
info => Building preview..
info => Using implicit CSS loaders
info => Using default Webpack5 setup
info => Copying static files: assets at ..\..\Users\DBXRST0\AppData\Local\Temp\chromatic--27436-h1niBISpyMWR
Module parse failed: Unexpected character ' ' (4:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { Controls } from "@storybook/blocks";
|
> # DonutChart
|
| <DonutChart
=> Failed to build the preview
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
at .\node_modules\@storybook\builder-webpack5\dist\index.js:1:25143
at .\node_modules\webpack\lib\HookWebpackError.js:67:2
at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.\node_modules\tapable\lib\Hook.js:18:14)
at Cache.shutdown (.\node_modules\webpack\lib\Cache.js:154:23)
at .\node_modules\webpack\lib\Compiler.js:1379:15
at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.close (.\node_modules\webpack\lib\Compiler.js:1372:23)
at .\node_modules\@storybook\builder-webpack5\dist\index.js:1:25128
at finalCallback (.\node_modules\webpack\lib\Compiler.js:500:32)
at .\node_modules\webpack\lib\Compiler.js:524:13
at Hook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.\node_modules\tapable\lib\Hook.js:18:14)
at onCompiled (.\node_modules\webpack\lib\Compiler.js:522:21)
at .\node_modules\webpack\lib\Compiler.js:1350:17
at eval (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`
Environment OS: Windows 11 "@storybook/react": "^8.1.10", "@storybook/react-webpack5": "^8.1.10", "@chromatic-com/storybook": "1.5.0",
Reproduction repo Sorry, behind a company proxy and have a complex setup.
Somehow the Webpack configuration doesn't know how to handle mdx files. When I run the storybook build script manually, everything works just fine.
Did anyone get any further on this problem? I can post more information if needed but I am not sure what that would be.
I'm having this problem as well. I'm able to build the storybook from the commandline, but clicking the Take snapshot button fails. One detail that's missing above (perhaps unique to my failure state) is the error below. It appears the Chromatic Storybook build is not able to process an mdx story. We have our docs.page template written in Markdown, which Storybook supports.
Expression expected (Note that you need plugins to import files that are not JavaScript)
file: /Users/violin/wapo/arc-ui/apps/storybooks/.storybook/component-template.mdx:4:0
2: import { ExternalLinks } from '../src/components/external-links'
3:
4: <Meta isTemplate />
^
5:
6: <Title />
we have a similar issue - in our case, we don't have a "scripts" section in our storybook package.json because we're using Nx and the 'scripts' are tasks from the project json. Just adding an empty scripts section helps see more detail which is eventually:
Build script not found
The CLI didn't find a script called "build-storybook" in your package.json.
Make sure you set the --build-script-name option to the value of the script name that builds your Storybook.
FWIW, I got the build working with Nx by adding a build-storybook script to my package.json which calls the nx command. It builds fine but then keeps failing on the uploading files step.
@ChrisSargent do you have any details on the upload failing? It may be a completely different issue.
oh..... it's working now :-)
EDIT: actually still the same issue, will debug it when I get a few mins.
Similar to @nvioli now I'm getting a little better error now. I'm using Vite so it's Rollup that's reporting the error, but seems like it's not being able to read MDX for some reason?
[31m../../path-to-component/useDisclosure.mdx (5:0): Expression expected (Note that you need plugins to import files that are not JavaScript)[39m
file: [36m/Users/sampeUser/Sites/path-to-package/src/useDisclosure/useDisclosure.mdx:5:0[39m
[33m
3: import * as useDisclosure from './useDisclosure.stories';
4:
5: <Meta title="Hooks/useDisclosure" />
^
6:
7: # Hooks
[39m
at getRollupError (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/parseAst.js:397:41)
at ParseError.initialise (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/node-entry.js:14112:28)
at convertNode (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/node-entry.js:16006:10)
at convertProgram (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/node-entry.js:15249:12)
at Module.setSource (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/node-entry.js:16993:24)
at async ModuleLoader.addModuleSource (file:///Users/sampeUser/Sites/path-to-repo/node_modules/rollup/dist/es/shared/node-entry.js:20902:13)
(I had to replace paths for this post)
Ok, I think I have a workaround! Now that we have a more detailed error message it looks like others were having that issue and solved it. Take a look at issue thread https://github.com/chromaui/addon-visual-tests/issues/275, specifically the part about adding this to your main.ts file:
build: {
test: {
disabledAddons: [],
},
},