Material UI as peerDependency not working

[andrebnassis]

Hello,

I was trying to use this template to create a library based on material ui components, but when I insert material-ui as peerDependencies, it throws some errors. I already tried a lot of solutions and I failed.

I create a minimal scenario by:

1. cloned this template
2. installed @material-ui/core
3. modify the initial example to extend TypographyProps and use its props over TestComponent.tsx
4. Add @material-ui/core as peerDependencies and add external on rollup config (I also already tried without external rollup config)
5. delete node_modules and build
6. run 'yarn && yarn build' Then the following error throws:

[!] (plugin rpt2) Error: //rollup-material-ui-peerDependencies-error/src/TestComponent/TestComponent.tsx(2,28): semantic error TS2307: Cannot find module '@material-ui/core' or its corresponding type declarations.

Here it is a link with the replicated scenario: You can just clone and run 'yarn && yarn build' to see the error. https://github.com/andrebnassis/rollup-material-ui-peerDependencies-error

I've also opened a question on stackoverflow to explain all my research to find a solution for it. You can see it here: https://stackoverflow.com/questions/68581137/is-it-possible-to-have-material-ui-as-peerdependency-but-keep-its-types-as-devde

I would be glad if anyone can help me find the solution. Thanks in advance.

[TimEnglart]

Not sure if this is good practice, but If I need a peer dependency for developement steps (e.g. compiling/transpiling) I generally add the package to both peerDependencies and a devDependencies so bundlers shouldn't add it to the bundle and as you specify it as a peer dependency the down-stream projects will need to install the package and should resolve the @material-ui/core based on its packages.

I cloned your repo and attempted this and it bundled fine and npm said the generated tarball size is:

• 11.0kB packaged;
• 52.0kB unpackaged In the generated source it provides your component under the pretence that @material-ui/core is resolved by the machine running the bundled build/index[.esm].js

[andrebnassis]

Not sure if this is good practice, but If I need a peer dependency for developement steps (e.g. compiling/transpiling) I generally add the package to both peerDependencies and a devDependencies so bundlers shouldn't add it to the bundle and as you specify it as a peer dependency the down-stream projects will need to install the package and should resolve the @material-ui/core based on its packages.

I cloned your repo and attempted this and it bundled fine and npm said the generated tarball size is:

• 11.0kB packaged;
• 52.0kB unpackaged In the generated source it provides your component under the pretence that @material-ui/core is resolved by the machine running the bundled build/index[.esm].js

Thanks @TimEnglart! I just set all my peerDependencies as devDependencies and it works perfectly! I don't know why but I thought setting a package as devDep and peerDep wasn't possible.

Thanks again!