Open jeremydrichardson opened 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.
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
> 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:
Using tsconfig paths for react-docgen
acorn-typescript
Don't know if any of those have significance but maybe will help get us in the right direction?
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:So I enabled the Storybook log and found the following error in
build-storybook.log
:Funny thing is if I run that same command manually from the command line it complete fine.
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