title: Is it possible to have Material UI as peerDependency but keep its types as DevDependency?
body: <p>Is it possible to have Material UI as peerDependency but keep its types as DevDependency?</p>
  <p>I am building a component library using React + Typescript and the components are based on Material UI library, with Rollup as module bundler.</p>
  <p>Here is an example of my <code>IInputProps</code> type extending Material UI <code>TextFieldProps</code> type.</p>
  <pre class="lang-js prettyprint-override"><code>import { TextFieldProps } from &quot;@material-ui/core&quot;;
  
  export type IInputProps = TextFieldProps &amp; {...}
  </code></pre>
  <p>My goal is to set Material UI packages as a peerDependency, so it will use the material-ui package installed on the target project. I inserted the Material UI as peerDependency and set up <code>rollup</code> with <code>peerDepsExternal</code> plugin. When I tried to build the package, it throws the following error:</p>
  <p><code>Cannot find module '@material-ui/core' or its corresponding type declarations.</code></p>
  <p>The reason is related to this answer (<a href="https://stackoverflow.com/questions/52194069/whats-the-relationship-of-material-ui-core-and-types-material-ui/52194095">What&#39;s the relationship of @material-ui/core and @types/material-ui?</a>). Material-UI package contains its own type definitions (<code>*.d.ts files</code>), so when I set it as peerDependency, the types/interfaces are missing. To solve this problem, I followed this solution (<a href="https://github.com/ezolenko/rollup-plugin-typescript2/issues/198" rel="nofollow noreferrer">https://github.com/ezolenko/rollup-plugin-typescript2/issues/198</a>) declaring each module on a src/@types/material-ui/index.d.ts file, but it raised another problem: I cannot use material-ui types/interfaces anymore.</p>
  <p>With <code>@material-ui/core</code> declared on my <code>src/@types/material-ui/index.d.ts</code> file, the code points this error below.</p>
  <p><code>Cannot use namespace 'TextFieldProps' as a type.ts(2709)</code></p>
  <p><code>Exported type alias 'IInputProps' has or is using private name 'TextFieldProps'.ts(4081)</code></p>
  <p>Now, I can only see these 2 solutions:</p>
  <ol>
  <li>Keep the entire material ui packages on my library and lose in the package size:</li>
  </ol>
  <pre><code>Library with Material UI packages as peerDependency
  npm notice package size:  101.0 kB
  npm notice unpacked size: 493.6 kB
  
  Library with Material UI packages
  npm notice package size:  1.2 MB
  npm notice unpacked size: 6.0 MB
  </code></pre>
  <ol start="2">
  <li>Use Material UI as peerDependency, but lose the Material UI types/interfaces and lint (by adding a property to my types/interfaces that accept any prop - <a href="https://stackoverflow.com/questions/33836671/typescript-interface-that-allows-other-properties">TypeScript interface that allows other properties</a>).</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>[x:string]:any
  </code></pre>
  <p>So, I would like to know if there is <strong>any way to have Material UI as peerDependency but keep its types as devDependencies</strong>, so I can bundle it with Material UI as peerDependency and also use its types on my package?</p>
  <p>My configurations are following below:</p>
  <p><em>src/@types/material-ui/index.d.ts</em></p>
  <pre class="lang-js prettyprint-override"><code>declare module &quot;@material-ui/core&quot;;
  </code></pre>
  <p><em>rollup.config.js</em></p>
  <pre class="lang-js prettyprint-override"><code>import peerDepsExternal from &quot;rollup-plugin-peer-deps-external&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import image from &quot;@rollup/plugin-image&quot;;
  import typescript from &quot;rollup-plugin-typescript2&quot;;
  
  const packageJson = require(&quot;./package.json&quot;);
  
  export default {
    input: &quot;src/index.ts&quot;,
    output: [
      {
        file: packageJson.main,
        format: &quot;cjs&quot;,
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: &quot;esm&quot;,
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      image(),
      typescript({ useTsconfigDeclarationDir: true })
    ]
  };
  </code></pre>
  <p><em>tsconfig.json</em></p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;rootDir&quot;: &quot;src&quot;,
      &quot;declaration&quot;: true,
      &quot;declarationDir&quot;: &quot;build&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;lib&quot;: [&quot;es6&quot;, &quot;dom&quot;, &quot;es2016&quot;, &quot;es2017&quot;],
      &quot;sourceMap&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;typeRoots&quot;: [&quot;./src/@types&quot;]
    },
    &quot;include&quot;: [&quot;src/**/*&quot;],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;,
      &quot;build&quot;,
      &quot;storybook-static&quot;,
      &quot;src/**/*.stories.tsx&quot;,
      &quot;src/**/*.test.tsx&quot;
    ]
  }
  </code></pre>
  <p><em>package.json</em></p>
  <pre class="lang-json prettyprint-override"><code>...
  &quot;main&quot;: &quot;build/index.js&quot;,
    &quot;module&quot;: &quot;build/index.esm.js&quot;,
  ...
  ,
    &quot;peerDependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.11.4&quot;,
      &quot;react&quot;: &quot;^16.8.0&quot;,
      &quot;react-dom&quot;: &quot;^16.8.0&quot;,
    },
  ...
  </code></pre>