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

Reactjs – How to run my react app by manually adding vitejs

I am a beginner and learning react and using Vite as module bundler.

But instead of creating vite project, I am manually adding it.
In project directory i ran node cmd – npm install vite @vite/plugin-react. And it created node modules folder and package.json and lock file.

When i open using live server in vscode i get –
index.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

From searching i found to include "start" :"…" in package.json but dont know what to include there. I tried "start": "node scripts/index.jsx"
And when i open in node using npm run or npm start i get error =>

npm ERR! Missing script: "start"
:"…" Lifecycle scripts included in undefined:
start
node /scripts/index.jsx

and when i run npm start i get =>

Error: Cannot find module ‘D:scriptsindex.jsx’
at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49 { code: ‘MODULE_NOT_FOUND’, requireStack: []

MY index.jsx and index.html =>

import Header from "./scripts/Header.js";
const root= ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page/>);   

function Page() {
    return(
        <div>
            <Header/>
            {/* <MainContent>
                <Card/>
            </MainContent>
            <Footer/> */}
        </div>
    )
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>A Minimal React App</title>
    <!-- <link rel="stylesheet" href="index.css"> -->

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div> 
    <script src="scripts/index.jsx" type="module"></script>       
</body>
</html>

MY package.json =>

{ "type": "module",
"scripts": {
"build": "vite build" },
"dependencies": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.1.6" } }

Can anyone please help how to resolve this error and run the app?

Tags:

2

Answers


  1. 0

    From what i get…you have an existing react project, created with CRA, and want to migrate to Vite, right?

    With vite you dont need to use live server, and from what i see in you package.json file, you’re missing the start command for vite.

    Check this link for a migration guide from cra to vite

    I’m not sure about the error you posted, but i think that its a conflict of having react-scripts(from cra) and vite installed. Honestly…check the guide first and see if you did everything accordingly, 99% sure the error will disappear. Dont forget to run vite with the proper command as well 😛

    Have fun! 🙂

    Login or Signup to reply.
  2. 0

    install vite.js again with theses orders on your current folder open that in cmd and type
    npm create vite@latest then choose react.js and then javascript
    when installation is finished open up your vs.code in that folder and install modules by command npm i

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

Back To Top
Search