'babel' does not exist in type 'StorybookConfig'.

[jonsoku-dev]

Storybook Docs
https://storybook.js.org/docs/react/configure/babel#custom-configuration

I configured it according to the Docs, but There is no type for babel in main.ts .

• �do I customize reactOptions using core-common type? (declare)

package.json

"devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-decorators": "^7.17.8",
    "@babel/plugin-proposal-export-default-from": "^7.16.7",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.16.11",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-arrow-functions": "^7.16.7",
    "@babel/plugin-transform-block-scoping": "^7.16.7",
    "@babel/plugin-transform-classes": "^7.16.7",
    "@babel/plugin-transform-destructuring": "^7.17.7",
    "@babel/plugin-transform-for-of": "^7.16.7",
    "@babel/plugin-transform-parameters": "^7.16.7",
    "@babel/plugin-transform-shorthand-properties": "^7.16.7",
    "@babel/plugin-transform-spread": "^7.16.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-typescript": "^7.16.7",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "@faker-js/faker": "^6.1.1",
    "@react-theming/storybook-addon": "^1.1.5",
    "@storybook/addon-a11y": "^6.4.20",
    "@storybook/addon-actions": "^6.4.20",
    "@storybook/addon-essentials": "^6.4.20",
    "@storybook/addon-interactions": "^6.4.20",
    "@storybook/addon-storysource": "^6.4.20",
    "@storybook/builder-webpack5": "^6.4.20",
    "@storybook/jest": "^0.0.10",
    "@storybook/manager-webpack5": "^6.4.20",
    "@storybook/react": "^6.4.20",
    "@storybook/testing-library": "^0.0.9",
    "@types/babel__preset-env": "^7",
    "babel-loader": "^8.2.4",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-polyfill-corejs3": "^0.5.2",
    "core-js": "^3.21.1",
    "react-docgen-typescript": "^2.2.2",
    "storybook-addon-designs": "^6.2.1",
    "ts-node": "^10.7.0",
    "@emotion/babel-plugin": "^11.7.2"
  },

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react/types'

const config: StorybookConfig = { 
  ...
  features: {
    babelModeV7: true,
    modernInlineRender: true,
    interactionsDebugger: true,
  },
  reactOptions: {
    fastRefresh: true,
  },
  babel: async options => {
    options.presets.push('@emotion/babel-preset-css-prop')
    return options
  },
  ...

tsconfig.json

{
  "include": ["stories/*", ".storybook/main.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "strict": true
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

[mapolonio]

Hello, I have the same problem but with the env attribute. We have migrated our main.js to main.ts and now the env attribute is causing type check errors because 'env' does not exist in type 'StorybookConfig'

[IanVS]

I've opened #21173 to add the type.

[Todberg]

Any update on this?