Error Running NPM Run Dev

[Zacksaph0ne]

VITE v4.0.4 ready in 407 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? 1:53:32 p.m. [vite] Internal server error: Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? Plugin: vite:import-analysis File: C:/Users/Zach Non Admin/Desktop/dalle_clone/client/src/App.jsx:2:22 16 | var _s = $RefreshSig$(); 17 | import { useState } from "react"; 18 | import reactLogo from "./assets/react.svg"; | ^ 19 | import "./App.css"; 20 | function App() { at formatError (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46) at TransformContext.error (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19) at normalizeUrl (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39540:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async TransformContext.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39673:47) at async Object.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30) at async loadAndTransform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration

Then when I click on the server:

1:54:21 p.m. [vite] Internal server error: Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? Plugin: vite:import-analysis File: C:/Users/Zach Non Admin/Desktop/dalle_clone/client/src/App.jsx:2:22 16 | var _s = $RefreshSig$(); 17 | import { useState } from "react"; 18 | import reactLogo from "./assets/react.svg"; | ^ 19 | import "./App.css"; 20 | function App() { at formatError (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46) at TransformContext.error (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19) at normalizeUrl (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39540:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async TransformContext.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39673:47) at async Object.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30) at async loadAndTransform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29) (x2)

[Shoaib-A]

simply remove the react logo or maybe you are not importing assets file correctly.

[oyeabhijit]

1. Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? Here you have used src backward slash \ App.jsx instead of a forward slash like this/

2. 16 | var _s = RefreshSig(); Usage of var in ES6+ versions is discouraged, rather use let or const.

3. 18 | import reactLogo from "./assets/react.svg"; If you have correctly written the index.js script in the assets folder, you won't be needing to specify react.svg

@Zacksaph0ne

[codewithnadeem14502]

Bro till share with community around 75 lecture is completely fine pls watch again or start from first point.

[Zacksaph0ne]

Here are the steps I followed that got me to this error:

created dalle_clone folder opened MS VS Was already in dalle_clone folder Entered commands:

cd client npm create @vitelatest ./ Selected React Selected Javascript ran npm install

PS C:\Users\Zach Non Admin\Desktop\Dalle_Clone> cd client
PS C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client> npm create vite@latest ./
√ Select a framework: » React √ Select a variant: » JavaScript

Scaffolding project in C:\Users\Zach Non Admin\Desktop\dalle_clone\client...

Done. Now run:

npm install npm run dev

PS C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client> npm install

added 82 packages, and audited 83 packages in 5s

8 packages are looking for funding run npm fund for details

found 0 vulnerabilities PS C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client>

deleted assets folder in C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\assets\

downloaded assets from: https://drive.google.com/file/d/12ZCrmvvqrI2KONvpm1fWpf2pKkGlgIpE/view

copied contents into C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\assets from file explorer, copied the following files:

download index logo preview

added file folder to C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\ added file folder name constants to the above created index.js in above file folder C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\constants\

used raw info from: https://gist.githubusercontent.com/adrianhajdin/b2264e1f443a0003d6947549b9e07ec5/raw/56e679d4ee0c93de2880bf6a9b21e99a90a00abb/constants

deleted content of index.js file what was in index.js from C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\assets\index.js

pasted into the above index.js file C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\constants\index.js

deleted content of index.css at C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\index.css

pasted contents to C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\index.css from https://raw.githubusercontent.com/adrianhajdin/project_ai_mern_image_generation/main/client/src/index.css

was directed to go to page: https://tailwindcss.com/docs/guides/vite to follow steps to install tailwind CSS with Vite

ran following commands after ensuring I was in the correct area in MS VS: C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client>

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

was directed to paste contents from https://raw.githubusercontent.com/adrianhajdin/project_ai_mern_image_generation/main/client/tailwind.config.cjs into C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client>\tailwind.config.cjs, pasted raw into file in MS VS

deleted contents from client\src\app.jsx typed rafce into the above mentioned file (already installed es7+ deleted

App

from line 5 pasted:

Hello world!

into line 5 of client\src\app.jsx

ran npm install file-saver from C:\Users\Zach Non Admin\Desktop\Dalle_Clone\client>

same error:

3:31:18 p.m. [vite] Internal server error: Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? Plugin: vite:import-analysis File: C:/Users/Zach Non Admin/Desktop/dalle_clone/client/src/App.jsx:2:22 16 | var _s = $RefreshSig$(); 17 | import { useState } from "react"; 18 | import reactLogo from "./assets/react.svg"; | ^ 19 | import "./App.css"; 20 | function App() { at formatError (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46) at TransformContext.error (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19) at normalizeUrl (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39540:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async TransformContext.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39673:47) at async Object.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30) at async loadAndTransform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29)

warn - The content option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration 3:31:19 p.m. [vite] Internal server error: Failed to resolve import "./assets/react.svg" from "src\App.jsx". Does the file exist? Plugin: vite:import-analysis File: C:/Users/Zach Non Admin/Desktop/dalle_clone/client/src/App.jsx:2:22 16 | var _s = $RefreshSig$(); 17 | import { useState } from "react"; 18 | import reactLogo from "./assets/react.svg"; | ^ 19 | import "./App.css"; 20 | function App() { at formatError (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46) at TransformContext.error (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19) at normalizeUrl (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39540:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async TransformContext.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39673:47) at async Object.transform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30) at async loadAndTransform (file:///C:/Users/Zach%20Non%20Admin/Desktop/dalle_clone/client/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39313:29) (x2)

When I copied the contents of the assets, they were: assets/app.jsx assets/app.css assets/main.jsx assets/index.css

instead of:

C:\Users\Zach Non Admin\Desktop\dalle_clone\client\src\assets

Why did my computer have the files backwards like that? @oyeabhijit

[Shoaib-A]

when you download the folder it named as assets4 first of all change that to assets and secondly maybe you are keeping that assets folder in your src directory and not in your client folder other then that make sure to add extensions like auto import soo you don't have to worry about import or you can do is to remove that line and then write that import on your own sometime it will also solve the problem

[KStizzle]

What was the solution for this issue? Having the same issue here.