Imports with Jotai and create react app failing

Question

I'm attempting to use the jotai-react-query library, and so I want to leverage

import {useHydrateAtoms} from "jotai/react/utils/useHydrateAtoms";

However when I'm building a test with jest, it cannot find the import. To verify, I created a blank app with:

npx create-react-app jest-example --template typescript

and added jotai

npm add jotai

and then added the import in App.tsx

import {useHydrateAtoms} from "jotai/react/utils/useHydrateAtoms";

plus a line to use it:

const y = useHydrateAtoms([])

and same as my project, the import fails:

Cannot find module 'jotai/react/utils/useHydrateAtoms' from 'src/App.test.tsx'

I've tried poking at some jest options in package.json, but I haven't found a combination that makes a difference.

Answer 1

I'm not sure if this will solve your issue but it sounds like (if you haven't already) the path to your node modules will need to be set up for jest.

"jest": {
  "moduleDirectories": [
    "node_modules"
  ],
}

Answer 2

You're not importing it correctly. Although the type definition for useHydrateAtoms comes from the jotai/react/utils/useHydrateAtoms.d.ts file, there's no file such as jotai/react/utils/useHydrateAtoms.js in the package.

Instead, useHydrateAtoms is defined in the jotai/react/utils.js file. The type definition for the utils.js file comes from the utils.d.ts file, which imports type definitions from jotai/react/utils/*.d.ts.

So, the import that you should be using is -

import { useHydrateAtoms } from "jotai/react/utils";