Site deploys fine, but resources are failing to load

good day sir, I have done it that way, still getting the same error

The front end doesn’t appear to use the rewrites you have created. In src/api/index.js you have:

const API = axios.create({ baseUrl: 'https://memory-lane2021.herokuapp.com' })

which means all API calls are going directly to Heroku. Therefore, any error received by the client (browser) is being received directly from Heroku, and not Netlify.

Hi netlify community,
I have a personal Vue-3-Project (just frontend, no backend) which runs locally → Checkout github repo. However, deployment leads to errors online. I could not figure out where the problem comes from. Any ideas?

This is the link to the netlify-app.

I deployed the repo and the deploy worked fine. However I get two error messages

TypeError: Cannot read properties of undefined (reading '$route')

and the 404 that was mentioned in this thread before:

Failed to load resource: the server responded with a status of 404 ()

Hey @HannesLinde

Try adding a _redirects file to the public directory with the following

/*   /index.html   200

as mentioned in this post and this documentation.

2 Likes

Hey @coelmay, thanks for the super quick response. Doing as you suggested deleted the 404. Great :slight_smile:
The other error regarding the router type was a Vue3 specific issue. For those interested: I am using <script setup lang="ts"> syntax and therefore I could not use this.$route.name in the template.

How it did not work:

<template>
<h3>{{this.$route.name}}</h3>
<p>Some stuff</p>
</template>

How it works now (also see here)

<template>
<h3>{{route.name}}</h3>
<p>Some stuff</p>
</template>

<script setup lang="ts">
import {useRoute} from 'vue-router';

const useRoute = useRoute();
</script>
1 Like

Hi,

Once I deployed the app, it partially shows. As in the error I get in the console is Failed to load resource: the server responded with a status of 404 () for images. None of my images get loaded, can you please help me out.

Website: https://musical-mochi-5ea939.netlify.app
GitHub: GitHub - Veenakrishna2313/airbnb-experience-clone

@Veenakrishna In your case the issue is just your project.

If you run it with npm run dev you can see your images, however if you run it locally with npm run build then change directory into the /dist folder and do an npx serve you will see precisely the same thing as on Netlify.

I’d imagine the issue is just how you’re handling your image paths, which you have defined with ../../src/assets/images/, since you’re using Vite you should take a look at their Static Asset Documentation.

Hi,

I have an issue, my website seems to build and deploy fine but when I visit it the nav bar is not showing. When I inspect element I receive 4 errors stating ‘Failed to load resource: the server responded with a status of 404 ()’ indexnew.js not on the file.

https://boikhutsodev.netlify.app/
GitHub - mariusmokoka/Build-and-Deploy-Your-Portfolio (inside my folder is there)

Hi,

I have an issue, my website seems to build and deploy fine but when I visit it the nav bar is not showing. When I inspect element I receive 4 errors stating ‘Failed to load resource: the server responded with a status of 404 ()’ indexnew.js not on the file.

https://boikhutsodev.netlify.app/
GitHub - mariusmokoka/Build-and-Deploy-Your-Portfolio (inside my folder is there)

The problem is mentioned in your build logs: Deploy details | Deploys | boikhutsodev | Netlify

<script src="js/indexnew.js"> in "/index.html" can"t be bundled without type="module" attribute
transforming...

You need to add type=module to that script.

1 Like

@mariusmokoka You can always run your Build command locally too (npm run build)

As hrishikesh has said, the error is very obvious there, as well as the note for how to fix it: