neer-chakra-v3

A package with Chakra UI React version 3.

Installation

npm install neer-chakra-v3

Usage

import { ChakraProvider, Button, Box, Text } from 'neer-chakra-v3';

function App() {
  return (
    <ChakraProvider>
      <Box p={4}>
        <Text>Hello World</Text>
        <Button colorScheme="blue">Click me</Button>
      </Box>
    </ChakraProvider>
  );
}

Jest Configuration

If you're using Jest for testing, you may encounter a structuredClone is not defined error. Here are solutions:

Option 1: Add Polyfill (Recommended)

1. Install the polyfill:

npm install --save-dev @ungap/structured-clone

2. Create or update your Jest setup file (setupTests.js or jest.setup.js):

import { structuredClone } from '@ungap/structured-clone';

// Polyfill for structuredClone in Jest environment
global.structuredClone = structuredClone;

3. Update your jest.config.js to include the setup file:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  testEnvironment: 'jsdom',
  // ... other config
};

Option 2: Update Node.js Version

Ensure you're using Node.js 17+ which has native structuredClone support:

node --version  # Should be 17.0.0 or higher

Option 3: Alternative Polyfill

If you prefer a different approach, add this to your test setup:

// Simple polyfill alternative
global.structuredClone = global.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj)));

Dependencies

• @chakra-ui/react: ^3.27.0

Compatibility

• React 18+
• TypeScript support included
• ESM and CommonJS compatible
• NextJS compatible