React/Django application in VSCode is giving me a "syntax" error, but I don't know what it means and never seen it before

I started building the front-end of the application with react and then I integrated Django and Django RF afterwards. I had a couple of problems with the initial set up, but I have been able to figure out each bug as they come, however, this one I don't really know what it means, it looks like a syntax error, but I am not sure what's causing it.

  1. When I run the server there's no problems and I actually a 200 status code 200 status code when going to localhost:8000

  2. webpack is running and compiled successfully

  3. In my index.html I am trying yo load my JS which is in a static folder like this enter image description here but it shows me sort of like a syntax error, maybe it's not expecting that type of syntax ?

  4. When I look at my console in the browser I can see that my links have loaded, and that the script is working since it can reference where my JS file is console in the browser index.js import file problems

  5. One way to fix this is by adding type="module" in my index.html file inside the script tag, but once I do that it gives me this error console in the browser index.js file

I have tried adding a type:module in my package.json so that I don't have it on my script, but it doesn't really change anything other than needing import statements everywhere instead of require.

I have watched a couple of youtube videos and they seem pretty similar to what I have, never seen the right highlight on the script tho.

When I run npm run dev my index.html seems fine and it doesn't break even though I have the script highlighted in red.

Thank you so much in advance. Any guidance will be highly appreciated!

Back to Top