Menu
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 fundfor detailsfound 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.
259
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
192
answered Oct 26 '25 04:10
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>
)
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
