Property 'prop' does not exist on type 'IntrinsicAttributes & CustomComponentProps'

Question

I have a custom module in which I have an interface for props and it is extending props from a /types/SharedProps.d.ts file. When I import the module into an example project, the component does not contain the extended props. The module's index.tsx file looks like this:

import { SharedProps } from "./types/SharedProps";

interface CustomComponentProps extends SharedProps {
  notARobotText?: string;
  onClickCheckbox?: () => void;
  onVerificationComplete: () => void;
}

const CustomComponent = (props: CustomComponentProps ) => {
  const { notARobotText, cellsTall} = props;
  return (
    <div>
      Yo {notARobotText}, say hello. {cellsTall}
    </div>
  );
};

export default CustomComponent ;

./types/SharedProps looks like this:

export interface SharedProps {
  cellsTall?: number;
  cellsWide?: number;
}

The tsconfig.json :

{
  "compilerOptions": {
    "outDir": "lib/esm",
    "module": "esnext",
    "target": "es2015",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react-jsx",
    "declaration": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "lib"]
}

And this is the App.tsx in the example project:

import React from "react";
import CustomComponent from "typescript-react-test";
import "./App.css";

function App() {
  const handleVerification = () => {
    window.alert("Verified, baby!");
  };
  return (
    <div className="App">
      <CustomComponent 
        notARobotText="Toulouse"
        onVerificationComplete={handleVerification}
      />
    </div>
  );
}

export default App;

The component displays the content and requires onVerificationComplete and accepts notARobotText and onClickCheckbox , but it won't accept cellsTall or cellsWide , saying,

Type '{ notARobotText: string; onVerificationComplete: () => void; cellsTall: number; }' is not assignable to type 'IntrinsicAttributes & CustomComponentProps.
  Property 'cellsTall' does not exist on type 'IntrinsicAttributes & CustomComponentProps'.ts(2322)

How can I ensure SharedProps are accessible when the component is imported into the example project?

The index.d.ts files created after building both look like this:

/// <reference types="react" />
import { SharedProps } from "./types/SharedProps";
interface CustomComponentProps extends SharedProps {
    notARobotText?: string;
    onClickCheckbox?: () => void;
    onVerificationComplete: () => void;
}
declare const CustomComponent: (props: CustomComponentProps) => JSX.Element;
export default CustomComponent;

The custom module is in the example's package.json as "typescript-react-test": "link:.." The file structure for the custom module and example site looks like the following ( /lib/ is the folder generated when I build the module):

├─example
│  └─src
│     └─App.tsx
├─lib
│  ├─cjs
│  │  └─index.d.ts
│  └─esm
│     └─index.d.ts
└─src
   ├─types
   │  └─SharedProps.d.ts
   └─index.tsx

Answer 1

The issue was that SharedProps were being exported from a file called SharedProps.ts . Moving them to an index.ts file and making them the default export resolved the issue. My new folder structure now looks like this:

├─example
│  └─src
│     └─App.tsx
├─lib
│  ├─cjs
│  │  ├─types
│  │  │  └─index.d.ts
│  │  └─index.d.ts
│  └─esm
│     ├─types
│     │  └─index.d.ts
│     └─index.d.ts
└─src
   ├─types
   │  └─index.ts
   └─index.tsx