CSF and import/no-anonymous-default-export

[robcaldecott]

Anyone who upgrades to react-scripts 4.0.0 may notice that a new import/no-anonymous-default-export eslint rule is now enabled by default. This will cause warning in your CSF story files for your default export, e.g.:

export default {
  title: "My stories"
};

This soon gets annoying so if you want to disable this warning for your stories edit the eslintConfig section in your package.json to look something like this:

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

This will leave the new warning in place for your components but exclude your stories.

For more info on this warning from Dan Abramov: https://twitter.com/dan_abramov/status/1255229440860262400

[shilman]

Thanks @robcaldecott! This is super annoying for CSF users since we REQUIRE an anonymous default export for the component's metadata 🙈

[cseas]

Hi @robcaldecott
Try this:

import { Meta } from "@storybook/react";

export default {
  title: "My stories"
} as Meta;

That makes the warning go away for me. It wouldn't be a good idea to turn off a good ESLint rule if we can just adapt our code to it.

[robcaldecott]

I think an eslint rule just for stories is preferable than the Meta workaround but YMMV. 😉

[shilman]

Another workaround here: facebook/create-react-app#9914 (comment)

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

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.7 containing PR #13452 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[gjoseph]

the second workaround removes the "extends": "react-app", and empirically that seems to completely remove the react rules/plugin from the whole project; but with the extends line, I can't seem to get the override to be effective 🤔

[OrhanTozan]

This is still an issue for me.

• Using Storybook 6.5.16
• eslint-plugin-storybook 0.6.10
• Next.js
• TypeScript