title: Property 'prop' does not exist on type 'IntrinsicAttributes & CustomComponentProps'
body: <p>I have a custom module in which I have an interface for <code>props</code> and it is extending props from a <code>/types/SharedProps.d.ts</code> file. When I import the module into an example project, the component does not contain the extended props. The module's <code>index.tsx</code> file looks like this:</p>
  <pre><code>import { SharedProps } from &quot;./types/SharedProps&quot;;
  
  interface CustomComponentProps extends SharedProps {
    notARobotText?: string;
    onClickCheckbox?: () =&gt; void;
    onVerificationComplete: () =&gt; void;
  }
  
  const CustomComponent = (props: CustomComponentProps ) =&gt; {
    const { notARobotText, cellsTall} = props;
    return (
      &lt;div&gt;
        Yo {notARobotText}, say hello. {cellsTall}
      &lt;/div&gt;
    );
  };
  
  export default CustomComponent ;
  </code></pre>
  <p><code>./types/SharedProps</code> looks like this:</p>
  <pre><code>export interface SharedProps {
    cellsTall?: number;
    cellsWide?: number;
  }
  </code></pre>
  <p>The <code>tsconfig.json</code>:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;lib/esm&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;target&quot;: &quot;es2015&quot;,
      &quot;lib&quot;: [&quot;es6&quot;, &quot;dom&quot;, &quot;es2016&quot;, &quot;es2017&quot;],
      &quot;jsx&quot;: &quot;react-jsx&quot;,
      &quot;declaration&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;noUnusedLocals&quot;: true,
      &quot;noUnusedParameters&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitThis&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;strictNullChecks&quot;: true,
      &quot;suppressImplicitAnyIndexErrors&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true
    },
    &quot;include&quot;: [&quot;src&quot;],
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;lib&quot;]
  }
  </code></pre>
  <p>And this is the <code>App.tsx</code> in the example project:</p>
  <pre><code>import React from &quot;react&quot;;
  import CustomComponent from &quot;typescript-react-test&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
    const handleVerification = () =&gt; {
      window.alert(&quot;Verified, baby!&quot;);
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;CustomComponent 
          notARobotText=&quot;Toulouse&quot;
          onVerificationComplete={handleVerification}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>The component displays the content and requires <code>onVerificationComplete</code> and accepts <code>notARobotText</code> and <code>onClickCheckbox</code>, but it won't accept <code>cellsTall</code> or <code>cellsWide</code>, saying,</p>
  <pre><code>Type '{ notARobotText: string; onVerificationComplete: () =&gt; void; cellsTall: number; }' is not assignable to type 'IntrinsicAttributes &amp; CustomComponentProps.
    Property 'cellsTall' does not exist on type 'IntrinsicAttributes &amp; CustomComponentProps'.ts(2322)
  </code></pre>
  <p>How can I ensure <code>SharedProps</code> are accessible when the component is imported into the example project?</p>
  <p>The index.d.ts files created after building both look like this:</p>
  <pre><code>/// &lt;reference types=&quot;react&quot; /&gt;
  import { SharedProps } from &quot;./types/SharedProps&quot;;
  interface CustomComponentProps extends SharedProps {
      notARobotText?: string;
      onClickCheckbox?: () =&gt; void;
      onVerificationComplete: () =&gt; void;
  }
  declare const CustomComponent: (props: CustomComponentProps) =&gt; JSX.Element;
  export default CustomComponent;
  </code></pre>
  <p>The custom module is in the example's package.json as <code>&quot;typescript-react-test&quot;: &quot;link:..&quot;</code> The file structure for the custom module and example site looks like the following (<code>/lib/</code> is the folder generated when I build the module):</p>
  <pre><code>├─example
  │  └─src
  │     └─App.tsx
  ├─lib
  │  ├─cjs
  │  │  └─index.d.ts
  │  └─esm
  │     └─index.d.ts
  └─src
     ├─types
     │  └─SharedProps.d.ts
     └─index.tsx
  </code></pre>