I am having trouble deploying my react solo project 4. Need help!

[rich vault]

my code is running fine on scrimba but it gives this error after npm run build i tried both methods in the video for installing node js i do not know what to do.
my scrim link.https://scrimba.com/scrim/cofd141f69b7b89c945f6c97e

[woven hemlock]

@rich vault So this webpack version which bundles the files to generate the project on scrimba.com is a little different than what you usually would run when working on a react project locally.

Because of that this webpack configuration doesn't support the spread or rest operator out of the box and you will need to install a plugin for webpack to enable that. And then once that is installed you can enable the plugin in the webpack config file.

Step 1: cd in to your project and install
npm i babel-plugin-transform-object-rest-spread

Step2: After installation, open your webpack.config.js and below the presets add the plugin like this.

"presets": [
"babel-preset-env",
"babel-preset-react"
],
"plugins": ["babel-plugin-transform-object-rest-spread"]

After that you can use npm run build command to build the index.html.

Although this being so messy and just a band aid solution I would recommend to not use this to deploy, in future you will learn a better way to run and build your React projects.

[rich vault]

i tried this it deployed but nothing is showing only the background image is shown. Any idea what can be the problem now?

[woven hemlock]

Please link the deployment url

Also detail what you did to deploy the app

[rich vault]

https://benevolent-crepe-fe87e1.netlify.app/

[rich vault]

i followed the steps you gave. opened the project folder with vs code ran the command npm i babel-plugin-transform-object-rest-spread in terminal than added the "plugins": ["babel-plugin-transform-object-rest-spread"] in webpack.config.js than ran npm run build . than i dropped the folder in netlify drop.

[woven hemlock]

Ugh, yeah deploying it is kinda broken. At this point you're better off creating a new Vite app, then manually transfering your existing code over to it and deploying that. I know it's a pain but it's better than trying to deal with the mess that is babel @rich vault

[rich vault]

can you explain a little what you are saying

i have no idea about Vite app .

[woven hemlock]

https://youtu.be/lvt_d0II0dY

[rich vault]

I am confused . Will I be able to copy paste my files in the new Vite app or I have to start coding from scratch?

[woven hemlock]

Once you have the vite app running, you can pretty much just copy and paste your current react files into it

[rich vault]

this you mean?

[woven hemlock]

yes

Keep watching the video, see what I do to strip out the boilerplate code and then add in your own