Storybook: 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: https://github.com/facebook/create-react-app/issues/9914#issuecomment-717051511

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