[SOLVED] Typescript React compiler issue with children props

Issue

The Typescript compiler seems to be having an issue recognizing JSX child elements as the children prop. I am trying to use Typescript for WordPress Gutenberg block development but am running into this odd issue.

Error

TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type ‘{ title: string; }’ is not assignable to parameter of type ‘Attributes & Props’.
Property ‘children’ is missing in type ‘{ title: string; }’ but required in type ‘Props’.

The error occurs on the edit.tsx file at <PanelBody title="Some Title">. For whatever reason the child element does not satisfy the children props for the PanelBody element. I can trick the compiler by adding children as a prop to get it to compile without errors:

<PanelBody children={null} ...>
  <p>Child</p>
</PanelBody>

But, VS Code gives me an error that says children is defined twice….rightly so. But the compiler doesn’t understand this and only sees one children prop here. Any reason why that is?

edit.tsx

import { BlockEditProps } from "@wordpress/blocks";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, Panel } from "@wordpress/components";

import React from "react";
import { BlockAttributes } from "./metadata";

const TestBlock: React.FC<BlockEditProps<BlockAttributes>> = (props) => {
  return (
    <>
      <InspectorControls>
        <Panel>
          <PanelBody title="Some title">
            <p>Some child element</p>
          </PanelBody>
        </Panel>
      </InspectorControls>
      <div>
        <p>This is some content. Maybe it needs a child?</p>
      </div>
    </>
  );
};

export default TestBlock;

webpack.config.js

const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaultConfig,
    entry: "./src/editor/index.ts",
    module: {
        ...defaultConfig.module,
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            ...defaultConfig.module.rules,
        ],
    },

    resolve: {
        ...defaultConfig.resolve,
        extensions: [".tsx", ".ts", ".js", ".jsx"],
    },

    output: {
        ...defaultConfig.output,
        filename: "index.js",
        path: path.resolve(__dirname, "dist/editor"),
    },
};

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "jsx": "react",
        "module": "ESNext",
        "target": "ES6",
        "allowJs": true
    },
    "exclude": [
        "node_modules"
    ],
    "include": ["src"]
}

package.json

{
  "devDependencies": {
    "@types/react": "^17.0.39",
    "@types/wordpress__block-editor": "^6.0.5",
    "@types/wordpress__blocks": "^9.1.1",
    "@types/wordpress__components": "^19.3.0",
    "parcel": "^2.0.1",
    "prettier": "^2.5.1",
    "ts-loader": "^9.2.7",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "@wordpress/block-editor": "^8.2.0",
    "@wordpress/blocks": "^11.2.2",
    "@wordpress/scripts": "^22.1.0"
  }
}

Solution

Well, it appears I followed some either bad or old advice on how to add Typescript support to Gutenberg block development.

Its really as simple as just using @wordpress/scripts without any configuration.

I removed all the custom stuff I did in the webpack config file as I was probably overriding and over doing some rules.

webpack.config.js

const path = require("path");
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

module.exports = {
    ...defaultConfig,
    entry: "./src/editor/index.ts",
    output: {
        ...defaultConfig.output,
        filename: "index.js",
        path: path.resolve(__dirname, "dist/editor"),
    },
};

The scripts package has typescript support built in so no need to manually add that functionality yourself.

Answered By – JoeMoe1984

Answer Checked By – Senaida (BugsFixing Volunteer)