Skip to content

[Bug]: Storybook 9 - eslintPlugin automigration crashes on config files with JSON5 format #31316

Open
@yannbf

Description

@yannbf

Describe the bug

The ESLint automigration for Storybook reads the user's eslintrc.json file (ESLint v8 and lower) which uses JSON5 and tolerates code comments, e.g.:

{
  "root": true,
  // define plugins to use
  "plugins": ["@nx"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "rules": {
        // This rule is necessary for certain reasons
        "@nx/enforce-module-boundaries": "error"
      }
    }
  ]
}

The automigration fails with:

✅ Adding dependencies: [email protected]
    Configuring Storybook ESLint plugin at /Users/yannbraga/experiments/delete/monorepo-experiences/three-geospatial/.eslintrc.json
❌ error when running eslintPlugin migration
SyntaxError: Expected property name or '}' in JSON at position 929 (line 42 column 9)
    at JSON.parse (<anonymous>)
    at configureEslintPlugin (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/storybook/dist/cli/index.cjs:71498:20)
    at async Object.run (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/@storybook/cli/dist/bin/index.cjs:315:25)
    at async runFixes (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/@storybook/cli/dist/bin/index.cjs:405:1796)
    at async automigrate (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/@storybook/cli/dist/bin/index.cjs:403:1831)
    at async doUpgrade (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/@storybook/cli/dist/bin/index.cjs:472:2574)
    at async withTelemetry (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/storybook/dist/core-server/index.cjs:36115:12)
    at async upgrade (/Users/yannbraga/.npm/_npx/14a2add4032cac20/node_modules/@storybook/cli/dist/bin/index.cjs:472:3081)

So either we support JSON5 formats, or we handle the error better and provide a message for users to manually update their config file.

Reproduction link

Reproduction steps

No response

System

-

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    No status

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions