Question 418404 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – chakra-ui v3 doesn't work with vite and react

I am following this tutorial:

Build and Deploy an Instagram Clone with React and Firebase – Tutorial

Which uses the package.json:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^3.2.1",
    "@emotion/react": "^11.13.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "vite": "^4.4.5"
  }
}

The front end is rendered using this main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from "@/components/ui/provider"
import { defaultSystem } from "@chakra-ui/react"
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider value={defaultSystem}>
      <App />
    </Provider>
  </StrictMode>,
)

As usual, main.jsx is rendered in index.html, snippet as follows:

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>

I also followed the documentation for upgrading chakra-ui from 2 to 3 as in the link

As you may imagine, this involves npm uninstall/install of the packages including ui provider and also other troubleshooting steps such as – delete node_modules etc and recreate the dependencies.

This shows the logs, which are fine:

added 367 packages, and audited 368 packages in 16s

104 packages are looking for funding run npm fund for details

found 0 vulnerabilities

However running the command:

npm run dev -- --host=127.0.0.1

gives the following error:

  VITE v4.5.5  ready in 281 ms

  ➜  Local:   http://127.0.0.1:5174/
  ➜  press h to show help
Error: The following dependencies are imported but could not be resolved:

  @/components/ui/provider (imported by C:/Users/PC/Code/nodejs/reactjs/instagram-clone/instagram-clone/vite-project/src/main.jsx)

Are they installed?
at file:///C:/Users/PC/Code/nodejs/reactjs/instagram-clone/instagram-clone/vite-project/node_modules/vite/dist/node/chunks/dep-b2890f90.js:45779:23
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/PC/Code/nodejs/reactjs/instagram-clone/instagram-clone/vite-project/node_modules/vite/dist/node/chunks/dep-b2890f90.js:45187:38

This is strange, as far as I think of, I don’t see why this can’t be installed by npm install. Or may be I clearly have to think outside of the yarn/npm world. Any pointers or help is greatly appreciated.

npm run dev console output

Tags:

2

Answers


  1. 0

    The error refers the import from your project, @/components/ui/provider, which doesn’t exist. It’s not affected by Chakra.

    The doc you linked explains this,

    The Provider component compose the ChakraProvider from Chakra and ThemeProvider from next-themes

    You’re supposed to write provider yourself.

    This is also covered in the docs. For a theme provided as value prop it would be:

    import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"

export function Provider(props) {
  return (
    <ChakraProvider value={props.value}>
      <ThemeProvider>
        {props.children}
      </ThemeProvider>
    </ChakraProvider>
  )
}
    Login or Signup to reply.
  2. 0

    Maybe you forget to run

    npx @chakra-ui/cli snippet add

    It will installed required dependencies and add recommended snippets, It will also create provider.tsx in you src/components/ui.

    Here is link to read more
    https://www.chakra-ui.com/docs/get-started/frameworks/vite#add-snippets

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search