Property 'children' Is Missing In Type

I am trying to setup Storybook with Typescript using babel-loader and ts-loader. Everything works fine except using children in a React component: [tsl] ERROR in .../stories/index.

Solution 1:

One possible solution is to leverage the default children mechanism in functional components, React.FC, which lets you mount children without explicitly include them as a prop in your type definition. For your case this is achievable by applying the following changes:

interface PropsextendsBorderProps,
    ColorProps,
    FlexboxProps,
    LayoutProps,
    SpaceProps,
    TypographyProps {
  title: string;
}

constCollapsible: React.FC<Props> = ({ children, title, ...rest }) => {
  ...
};

Working sandbox for this

Solution 2:

step 1

add React.FC: it already comes with children declared for you. And add your custom Props inside the React's.

Your code should be this:

const Collapsible : React.FC<Props> = ({ children, title, ...rest }) => {

step 2

interfacePropsextendsBorderProps,
    ColorProps,
    FlexboxProps,
    LayoutProps,
    SpaceProps,
    TypographyProps {
  children: ReactNode; // as React.FC declares it for you, just delete this line
  title: string;
}

Solution 3:

I added the Babel Preset Typescript and the error is gone.

This is what my .storybook/main.js looks like now:

module.exports = {
  addons: [
    "@storybook/addon-knobs",
  ],
  stories: ["../packages/**/*.stories.tsx"],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            configFile: '../tsconfig.json',
            transpileOnly: true
          }
        },
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript"
            ]
          }
        }
      ],
    });

    config.resolve.extensions.push('.ts', '.tsx');

    return config;
  }
};