Getting error 'dispatcher is null' every time I try to create a component library(either using rollup or tsup) and using Chakra.

[kainbryanjones]

Using Charka UI in a project that's a normal app works just fine but every time I've used it when making a component library I get this error and I'm not sure what's wrong.

This is being imported locally and tested in a ChakraProvider component. Here is my tsup config...

import type {Options} from 'tsup'

const config: Options = {
    entry: ['src/index.ts'],
    target: 'es2019',
    sourcemap: true,
    format: ['cjs', 'esm'],
}

export default config

and here is my tsconfig

{
  "compilerOptions": {
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */,
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

and here is my package json

{
  "name": "tsup-lib",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsup src/index.ts --dts",
    "start": "npm run build -- --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tsup": "^7.2.0",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

[rwilliams3088]

Seeing this same thing right now....

[kainbryanjones]

Hello there. This is quite an old post but it might be that you have circular dependencies (at least it was for me).

I used this tool to detect circular dependencies...
https://www.npmjs.com/package/dpdm

[rwilliams3088]

Thanks. I found the issue actually. I was using yarn link for local development. This resulted in the linked project using its own copy of react from its node_modules folder. In the parent project I had to add aliases to the webpack configuration in development so that everything would use the same copy of react.