reactjs - exportar paquete de Material UI con tema

Quiero crear un nuevo paquete npm donde pueda exportar todos los componentes de @material-ui/core pero personalizados a mi manera. Actualmente estoy usando TypeScript y Rollup, pero estoy fallando. Este es mi código

index.ts

export { Button } from '@material-ui/core'; 

package.json

{
  "name": "@ripley-ui/core",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "module": "build/index.esm.js",
  "types": "build/index.d.ts",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "storybook:export": "build-storybook",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@storybook/react": "^5.3.19",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.5",
    "@types/jest": "^26.0.4",
    "@types/react": "^16.9.43",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "rollup": "^2.21.0",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.1",
    "ts-jest": "^26.1.1",
    "typescript": "^3.9.6"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0"
  }
}

rollup.config.js

import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  external: ["react", "@material-ui/core"],
  plugins: [
    external(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true
    }),
    commonjs(),
  ]
};

y tsconfing.json

{
  "compilerOptions": {
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "storybook-static",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

y el error que obtiene al importar Button en una nueva aplicación es

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

¡Ayuda, por favor!

ACTUALIZACIÓN

Hice otra prueba, esta vez creando y exportando un nuevo componente hecho por mí, y todavía obtiene el mismo error de llamada de hook no válida, ¡aquí está el código!

import React, { useState } from "react";

import { TestComponentProps } from "./TestComponent.types";


const TestComponent: React.FC<TestComponentProps> = ({ theme }) => {
  const [state, setState] = useState('prueba')
  return (
  <div
    data-testid="test-component"
    className={`test-component test-component-${theme}`}
  >
    <h2>{state}</h2>
  </div>
)};

export default TestComponent;

¿Entonces tal vez es un problema de mi empaquetador o compilador?

Respuesta #1

Después de investigar un poco más, descubrí que no es un error de tu bundler (ni de webpack, parcel o rollup). Para solucionar este problema, solo tienes que publicar tu build en npm e instalarlo desde allí (no localmente) y voilà, funciona. Saludos

Respuesta #2

Excluir react y react-dom de devDependencies me ayudó a resolver este error