CODEWITHSUNDEEP
vitemernchakra-ui
user23416362
user23416362

Reputation: 11

I am struggling to fix a Chakra import file not found error in Vite

I am following this tutorial - https://www.youtube.com/watch?v=O3BUHwfHf84 (MERN Stack Tutorial with Deployment - Beginners Course. @59.15 We are up to developing the front end using Chakra, Vite and React.

I have this error: vite and react error message after following the steps on the Chakra website: https://www.chakra-ui.com/docs/get-started/frameworks/vite:

This is the error code:

18:23:13 [vite] Internal server error: Failed to resolve import "@/components/ui/provider" from "src/main.jsx". Does the file exist?
  Plugin: vite:import-analysis
  File: C:/Users/peter/Documents/GitHub/MERNCC/frontend/src/main.jsx:1:23
  1  |  import { jsxDEV } from "react/jsx-dev-runtime";
  2  |  import { Provider } from "@/components/ui/provider";
     |                            ^
  3  |  import { StrictMode } from "react";
  4  |  import { createRoot } from "react-dom/client";
      at TransformPluginContext._formatLog (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:47802:41)
      at TransformPluginContext.error (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:47799:16)
      at normalizeUrl (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:45942:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:46061:37
      at async Promise.all (index 1)
      at async TransformPluginContext.transform (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:45988:7)
      at async EnvironmentPluginContainer.transform (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:47597:18)
      at async loadAndTransform (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:41305:27)
      at async viteTransformMiddleware (file:///C:/Users/peter/Documents/GitHub/MERNCC/frontend/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:42761:24)

From what I can see it can't find the file provider.jsx yet you can see it in the file tree here: image showing file tree, clearly showing provider file.

My code looks like:

main.jsx looks like this

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

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

App.jsx looks like this

import { Button, ButtonGroup } from "@chakra-ui/react"
function App() {


  return (
    <>
     <Button>
        Hello
      </Button>
    </>
  )
}

export default App

When I change the import statement in my main.jsx to .components rather than @components:

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

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider>
      <App />
    </Provider>
  </StrictMode>,
)

I get a blank screen with no button vite + react screen.

The config file is here

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from "vite-tsconfig-paths"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    watch: {
      usePolling: true,
    
    },
  },
})

What is happening and how do I fix?

Upvotes: 1

Views: 83

Answers (1)

Destroyer369
Destroyer369

Reputation: 41

Try to install npm i @chakra-ui/provider. if this doesn't help, then costamize yours provider.jsx

import React from 'react';
import { ChakraProvider, extendTheme } from '@chakra-ui/react';

// Customize your Chakra UI theme (optional)
const customTheme = extendTheme({
  styles: {
    global: {
      body: {
        fontFamily: 'Arial, sans-serif',
        bg: 'gray.100',
        color: 'gray.800',
      },
    },
  },
});

const Provider= ({ children }) => {
  return <ChakraProvider theme={customTheme}>{children}</ChakraProvider>;
};

export default Provider;

Upvotes: 0

Related Questions