2

When running npm test I get the following error:

Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'

I created the app using create-react-app, with the @chakra-ui/typescript template. I can build and run the app, but when I run the tests it cannot seem to find the chakra components.

My package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/icons": "^2.2.4",
    "@chakra-ui/react": "^2.10.3",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@headlessui/react": "^2.2.0",
    "@heroicons/react": "^2.1.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.119",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "feather-icons": "^4.29.2",
    "framer-motion": "^11.11.11",
    "next-themes": "^0.4.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-feather": "^2.0.10",
    "react-icons": "^5.3.0",
    "react-router-dom": "^6.27.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

My test (App.test.tsx)

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText("Hello");
  expect(linkElement).toBeInTheDocument();
});

App.tsx

import { ReactNode } from "react";
import { Button } from "@chakra-ui/react";
import { ChakraProvider } from "@chakra-ui/react";
...


const App = () => {
  return (
    <ChakraProvider>
      ...
      <Button size={"sm"} colorScheme="red">
        Hello
      </Button>
      ... 
    </ChakraProvider>
  );
};

export default App;

Any suggestions would be greatly appreciated :)

3
  • what is your node & npm version ? @Mark Commented Nov 6, 2024 at 22:33
  • @ArtBindu they are - node - v16.20.2, npm - 8.19.4 Commented Nov 6, 2024 at 23:04
  • I am getting this exact problem! Did you ever find an answer? Commented Feb 3 at 15:03

1 Answer 1

1

Change the import in checkbox-context.cjs to

var context = require('@chakra-ui/utils/');

However this is only a workaround for local executions! The permanent solution which would work on ci as well is to upgrade your chackra from 2 to 3 as this issue is seem to be a version related one.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.