storybook field is no longer working in the config file

[AlexisCharp]

The problem

Hello,
I have recently updated @percy/cli from v1.24.2 to v1.27.1. I then saw the number of taken snapshot increase.
In my configuration, I have these lines :

storybook:
  include: ['Percy/.*']

It was working previously but now when running the percy config:validate command, it says :

[percy] Invalid config:
[percy] - storybook: unknown property

Environment

• Node version: 18.15.0
• @percy/cli version: 1.27.1
• @percy/storybook version: 4.3.6

Debug logs

[percy] Found config file: .percy.yml
[percy] Invalid config:
[percy] - storybook: unknown property

Code to reproduce issue

My full config :

version: 2
snapshot:
  widths:
    - 375
    - 768
    - 1280
  minHeight: 1024
  enableJavascript: true
discovery:
  networkIdleTimeout: 100
storybook:
  include: ['Percy/.*']

[itsjwala]

Seems mostly related to local dependency issue, I can't seem to reproduce this.

can you check if the dependency are really updated in node_modules/@percy/..?

[AlexisCharp]

It's the right version in the node_modules.

Weird that you can't reproduce because switching between my previous version and this new one and running the yarn percy config:validate command allows me to get a valid and an error message...

[AlexisCharp]

@itsjwala Did you have some time to take a look at this issue ?

[itsjwala]

Hey @AlexisCharp 👋

I again tried to confirm, I was not able to replicate this issue.

➜  cat node_modules/@percy/*/package.json | grep version
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "1.27.3",
  "version": "4.3.6",
  "version": "1.27.3",

---

➜  npx percy config:validate
[percy] Found config file: .percy.yml
[percy] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      1280
    ],
    minHeight: 1024,
    percyCSS: '',
    enableJavaScript: false
  },
  storybook: {
    include: [
      '*'
    ]
  }
}

➜  cat .percy.yml
version: 2

snapshot:
  widths:
    - 1280
  minHeight: 1024
  percyCSS: ""
  enable-javascript: false
storybook:
  include: ['*']

---

can you share a reproducible example zip / github repo with reproduction steps?

[itsjwala]

Few notes

• verify if the percy CLI and SDK being used is resolved to local node_modules ( use npx ... or ./node_modules/.bin/percy config:validate
  • Also confirm if CLI & storybook's version which is used is latest.

[stephiescastle]

This is happening to me now too:

> percy config:validate

[percy] Found config file: .percy.yml
[percy] Invalid config:
[percy] - storybook: unknown property

packages:

    "@percy/cli": "^1.30.0",
    "@percy/storybook": "^6.0.2",
    "storybook": "^8.3.5",

Node v20.15.1

Update: I did some further debugging and the issue seems to occur when I update @percy/cli from 1.28.7 to 1.28.8

[AlexisCharp]

It always occurs when you bump the version, does not seem related to a specific one though. On our team, we haven't find any solution yet... We kept our working version... not ideal...

[chinmay-browserstack]

The reason for this issue is that Percy Storybook SDK has a dependency on @percy/cli-command with the version range ^1.28.5, which allows it to download any version greater than 1.28.5. As a result, when we install or update @percy/cli to a version other than latest(or one which is installed by percy storybook SDK) cli, multiple instances of the cli-command package are created in the project, specifically:

• One instance at the root level: @percy/cli-command
• Another instance within the Storybook dependency tree: @percy/storybook/node_modules/cli-command

This duplication causes conflicts in configuration loading because some settings reference the root @percy/cli-command, while others reference the nested cli-command under Percy Storybook. This inconsistency in configuration sources prevents the settings from loading correctly across the project.

Notice multiple entry for @percy/cli-command

Solution:

Remove duplicate dependency from yarn/package lock file

• NPM - npm dedupe
• Yarn
  1. yarn add yarn-deduplicate
  2. npx yarn-deduplicate --strategy fewer --packages @percy/cli-command
  3. yarn install

[chinmay-browserstack]

@AlexisCharp @stephiescastle can you please try this solution.

[AlexisCharp]

Hello,
Indeed, that was the root cause, thanks for the investigation.

Your solution is working and it's ok for the moment. That being said, that would be nicer to have something at percy level to avoid confusion and manipulations on the consumers side. I don't know if there is a simple way to manage that though.

Thanks again, marking this as resolved.