Request for help bundling chakra

I’ve built some components that wrap chakra components. I’m trying to strip them out into their own library that I can include in other projects. I’m receiving an error on loading my apps that I include this library into when I try to use toasts.

I’ve tried several different packages to build it, including rollup, microbundle, and tsdx. The error message I am getting is “Invalid hook call”.

I was wondering if anyone has successfully accomplished something similar and would be generous to write something up on how it was done.

I’ve extracted it to the most basic recreation that I can come up with and uploaded it here.

https://github.com/dusty/chakra-tester

The entire library consists of this:

import { Box, BoxProps, Button, useToast } from '@chakra-ui/core'
import React, { FC, forwardRef } from 'react'

export const MyBox: FC<BoxProps> = forwardRef(({ children, ...rest }, ref) => {
  const toast = useToast()
  const sendToast = () => {
    toast({
      status: 'success',
      description: 'hello',
      duration: 3000,
      isClosable: true,
      position: 'top-right',
    })
  }
  return (
    <Box ref={ref} {...rest}>
      <Button onClick={sendToast}>{children}</Button>
    </Box>
  )
})

The example app trying to use this library consists of the following:

import { CSSReset, theme, ThemeProvider } from '@chakra-ui/core';
import { MyBox } from 'chakra-tester';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      <MyBox>Hello</MyBox>
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Does anyone have any ideas on this?

[ifedyukin]

I’ve got the same issue with my Webpack based library that uses Chakra-UI. I solved this problem with some minor fixes in my webpack.config.js:

externals: {
  // mark "react" and react-dom as external packages that will import using commons
  react: 'commonjs react',
  'react-dom': 'commonjs react-dom'
},
output: {
  path: path.resolve('./'),
  libraryTarget: 'commonjs2', // set library target
  filename: '[name].js',
  library: '',
}

Also, webpack-node-externals can help too.

[dusty]

Here is my config that is working with tsdx - although I’d love to give a try using just babel and tsc.

tsdx@0.13.1

tsconfig.json

{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "importHelpers": true,
    "declaration": true,
    "sourceMap": true,
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@": ["./"],
      "*": ["src/*", "node_modules/*"]
    },
    "jsx": "react",
    "esModuleInterop": true
  }
}

The example directory to run the code uses this package.json setup.

{
  "name": "example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react-app-polyfill": "^1.0.0"
  },
  "alias": {
    "react": "../node_modules/react",
    "react-dom": "../node_modules/react-dom/profiling",
    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
    "@types/react": "16.9.32",
    "@types/react-dom": "16.9.6",
    "parcel": "1.12.4",
    "typescript": "3.8.3"
  }
}