Create-react-app: CSF and import/no-anonymous-default-export

[cseas]

Upgrading to react-scripts 4.0 has started throwing up the following warnings everywhere in .stories files in my project:
Assign object to a variable before exporting as module default import/no-anonymous-default-export

I understand that named exports are the way to go for most things but Storybook's CSF (Component Story Format) is based on default exports. So any team that uses storybook for component documentation has to stick with react-scripts 3.x or deal with the annoying warnings they can't do anything about.

This ESLint rule, although good, shouldn't be turned on by default in create-react-app since the only other solution is for the storybook package maintainers to change the way their library works.

Related: https://github.com/storybookjs/storybook/issues/12914

[FezVrasta]

You can add this configuration to your package.json:

{
  "eslintConfig": {
    "overrides": [
      {
        "files": [
          "src/**/*.stories.js"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  }
}

[cseas]

Thank you!

Turns out there's a workaround to this so there's no need to turn off this rule.

Solution: https://github.com/storybookjs/storybook/issues/12914#issuecomment-717289707

[adrianhelvik]

Tbh, this does not seem like a great rule to include in an unopinionated framework. What is the reasoning behind including it?

I see no reason why this is bad:

// color.js
export default [
  '#967ADC',
  '#4FC0E9',
  '#A0D367',
  '#8BC051',
]