How to bundle theme-ui react component library?

[ghost]

Hi everyone.
There's very little docs or tutorials or some info on how to do this tricky process with theme-ui.
And when I try using my simple component in a newly create-react-app bootstrapped project, I get weird error:
Uncaught TypeError: Cannot read properties of null (reading 'useContext')

The simplest case I could make is the following:

• at first, I create a new component/theme library:

mkdir theme-component-library
cd theme-component-library
npm init -y
npm install -D microbundle react @types/react typescript
npx tsc --init
npm install -D theme-ui @emotion/react @emotion/styled @mdx-js/react

• my package.json looks like this:

{
  "name": "theme-component-library",
  "main": "dist/index.cjs",
  "module": "dist/index.module.js",
  "unpkg": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "rd /s /q dist && microbundle --tsconfig tsconfig.json --no-sourcemap",
    "dev": "microbundle watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mdx-js/react": "^2.2.1",
    "@types/react": "^18.0.26",
    "microbundle": "^0.15.1",
    "react": "^18.2.0",
    "theme-ui": "^0.15.4",
    "typescript": "^4.9.4"
  },
  "files": [
    "dist"
  ]
}

• my tsconfig.json looks like this:

{
    "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": false,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "esModuleInterop": true,
	},
	"include": ["./src/**/*"],
	"exclude": ["node_modules", "test", "lib", "**/*spec.ts"]
}

• In src folder I created a theme and a components folders
• I export a simple Button component, the code look like this:

/** @jsx jsx */
import { jsx } from 'theme-ui';

const Button= () => {
  return (
    <button
      type="button"
      sx={{
        color: 'red',
      }}
      >
      Hello
    </button>
  );
};

export default Button;

• I export everything in src/index.ts

export * from './components';
export { default as theme } from './theme';

• then I build it using npm run build command
• I created a new create-react-app project, there I installed all theme-ui packages:

npm install theme-ui @emotion/react @emotion/styled @mdx-js/react

• I also linked my theme-component-library there:

npm link ../theme-component-library

• Then I tried using Button in App.js:

/** @jsxImportSource theme-ui */
import { ThemeProvider } from 'theme-ui';
import { theme, Button } from 'theme-component-library';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button />
    </ThemeProvider>
  );
}

export default App;

• but the app throws this error:

react-refresh-runtime.development.js:315 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at t.useContext (index.module.js:1:1)
    at index.module.js:2:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef (react-dom.development.js:19226:1)
    at beginWork (react-dom.development.js:21636:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

May be there's some streamlined process thoroughly described to make all this work?
I found great articles on some aspects of using theme-ui here: https://paulie.dev/posts/2021/03/understanding-theme-ui/
Browsing Paulie's and tabetalt repos didn't give me the answer to deploy process etc.
And there's no more info on the web other than official docs, which are focused more on the styling process.

[hasparus]

From what I can guess looking at your code snippets, microbundle bundled Theme UI and Emotion, because you declare them as dev dependencies. Making them either dependencies or peerDependencies (my preference) should help.