custom package can't read useState when installed on another package

Question

I have created a custom component into a private repostory / registry and it's working locally (tested with storybooks). When I do "npm install" it gets correctly installed into the other package but when i try to start the project i get this error:

Uncaught TypeError: Cannot read properties of null (reading 'useState')

on react.development.js file... on this

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

I am pretty much lost on how to proceed

I tried adding a source map into the exported project and it's there but it wasn't helpful

When I try to open the file from the developer tool I get this error :

Could not load content for http://localhost:3000/Users/joaquinnader/web/src/VideoRecorder/index.tsx (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Answer 1

Ok the issue was very idiot... I had to add "react" and "react-dom" as an external dependency on the original project inside the rollup config. Posting this in the case it helps anyone

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
        sourcemapPathTransform
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
        sourcemapPathTransform
      },
    ],
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      svgr(),
      json(),
      babel({ babelHelpers: 'bundled' }),
      copy({
        targets: [{ src: "src", dest: "dist" }],
        copyOnce: true,
      }),
    ],
    external: ['styled-components',"react", "react-dom"]
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/],
  },
];