Theme object not provided by ThemeProvider when using a component library

Current behavior:

If ThemeProvider is imported into a component library, re-exported and packaged, the theme object doesn’t seem to be available to components in a project that consumes the library.

I’m honestly not sure if this is a bug or something I’m doing wrong. If it’s a config problem at my end I’m sorry.

To reproduce:

Minimal repo here https://github.com/Vazerthon/node-monorepo-test

Node 15 required!

• Clone the repo and follow guide in README
  • npm install in common/ui then npm run build
  • npm install at top level (to make shared lib available)
  • npm install in apps/simple and npm start
  • Uncomment any use of theme in App.js

Expected behavior:

The above steps should show that the theme is never provided to components in the React tree despite ThemeProvider being used and dev tools showing that the context is in place.

Environment information:

In common/ui “react”: “^17.0.1”, “react-dom”: “^17.0.1”, “webpack”: “^5.6.0”,

In apps/simple “react”: “^17.0.1”, “react-dom”: “^17.0.1”, “react-scripts”: “4.0.1”,

~ Edit ~

Upgrading to Emotion 11 has made the problem different / worse. It’s no longer limited to just the theme, any use of emotion in the client project causes a React hooks error.

[Andarist]

I believe that you should not have to install in each workspace - nor of them should have its own package-lock. THe root acts as an aggregate for the monorepo. This seems to be confirmed by some example that I have found in the wild and reflects what I’m used to from other monorepo setups: https://github.com/Quramy/npm-ts-workspaces-example/tree/0358e4cc84a5bea03604d2dafe4bb1eefc0af1f9

npm install in the root makes your packages available in the monorepo but your library has to also be built before it can actually be used by your app.

[Andarist]

99,9% of such cases are caused because you are using a duplicate @emotion/react dependency - so you provide from one copy but consume from another one. Please inspect your node_modules, npm link setup (if applicable) and so on