Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs during the AWS deployment process

Even after changing my imports from relative to absolute paths, the issue persists. The CV file is located in the root folder.

import resume from './KuroUsaResume.pdf'
import 'stylesheets/Home.css';


function Home() {
  return (
    <div className="home">

      .....
      
      .....

        <a href= {resume} download="KuroUsa's_Resume.pdf">
          <button className='home--download-button'>Download CV</button>
        </a>
        
      </div> 

      <div className="home--body">
        <img src={me} className="logo" alt="logo" />
      </div>
    </div>

  );
}

export default Home;

My jsconfig file:

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

Answer №1

I was able to solve my issue by referring to the following helpful website

Resolving PDF download error on ReactJS in Amazon Amplify AWS

It was necessary for me to explicitly specify that a .pdf file could be redirected, as it wasn't configured by default.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it common practice to make an API request in Next.js?

Presently, my backend is in NodeJS (Express) and I am currently transitioning from create-react-app to NextJS on the frontend. Should I continue making API requests from NextJS to the Express server or should I consider moving the APIs to NextJS itself so ...

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

Transferring Information Across Javascript Documents

I am facing a dilemma with using JSON data generated by one script in another script. I am unsure where to begin and have considered saving the JSON string to a text file for the second script to use, but this feels like a workaround rather than a proper s ...

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

Applying ngClass to handle positive and negative numbers and adjust color in Ionic/Capacitor

I have data from my API that includes price and percentage data. I want to display negative numbers in red, and zero or positive numbers in green. After exploring Angular documentation, I found that ngStyle and ngClass can be used for this purpose. I chose ...

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Just dipping my toes into the world of Vue framework here. I managed to create a selectable table that stores data in an object. I want this function to run in the background, so I figured it should be in the computed section. The object structure is as fo ...

Debouncing in AngularJS with $watch

In my code, I have an HTML search field represented by the following: <input ng-model-options="{ debounce: 500 }" type="text" ng-model="name"> Along with the JavaScript snippet: $scope.$watch('name', function(newVal, oldVal) { ...

Steps for creating checkboxes for individual table rows in HTML using embedded PHP and updating their values in a PostgreSQL database:1. Begin by iterating through each

I have already retrieved the data from the database. It is displayed on the HTML table, but it is currently in non-editable mode. I need to ensure that the data shown is accurate and update its Boolean value in the database. Otherwise, incorrect records sh ...

Execute a PowerShell script to trigger a button click action on a webpage

While trying to login to a website by entering the user id and password, I am facing an issue with clicking on the Login button. Despite trying to submit the form, I am unable to proceed further. Can anyone offer some assistance? $username = "abcd" $pa ...

Semi-transparent image

Can I achieve a semi-transparent image? Similar to this gradient: background:linear-gradient(to bottom,rgb(44, 44, 44),rgb(29, 38, 51,0.322)); ...

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

Best Practices for Implementing an Autocomplete Search Box in HTML

I'm currently working on implementing the code below and I could really use some guidance. Despite reading and watching Google Developers' YouTube videos, I am still struggling as I am new to this. My main goal is to integrate an autocomplete sea ...

What is the best way to utilize MongoDB aggregate in this particular scenario?

How can I optimize this mongoose query to improve performance and reduce size for production? const currentYear = (new Date).getFullYear() const usedCars = await CarModel.find({ ModelYear: {$lte: currentYear - 1} }).limit(10) const recentCars = await Car ...

The forEach method in JavaScript seems to work asynchronously

After reviewing other discussions on this platform, it seems that the general agreement is that forEach should be synchronous and block. However, in my code, something appears to be off as it doesn't behave that way: var noDupes = false; // se ...

What is the explanation for the outcome "-9 >> 2 = -3"?

What is the reason behind 9 >> 2 = 2 compared to -9 >> 2 = -3 ? Wouldn't it make more sense for it to be -2 instead? ...

Tips for adjusting the height of a div using the slideToggle function for expanding and collapsing content

Is there a way to modify my code in order to adjust the height of a <div> using slideToggle()? The current implementation works almost correctly, with one minor issue. When I click on one "read_more" and then click on another, it does not behave as e ...

What are the benefits of incorporating an external API with Next.js API routes?

I've recently started using Next.js and I'm curious about the purpose of export default function handler since we can directly fetch data from APIs. In my HTML code, I have the following snippet. When the submit button is clicked, the sendformDa ...

After making a POST request, the `Req.body` is assigned to

This is the JavaScript code I am using: app.use(express.static(__dirname)); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // support json encoded bodies app.get('/', function(req, res){ res.sendFile(__dirn ...

Restricting Meteor Publish to specific user (admin) for all collections

Is there a method to exclusively publish all meteor collections to users with the role of {role: "admin"}? The meteor autopublish package grants database access to all clients. Are there any techniques to utilize the autopublish package while implementing ...

Utilizing LocalStorage in conjunction with the redux state management

Currently, I am working on a single-page application using React and Redux. I have encountered the need to store certain data locally and ensure that it remains synchronized with the appState in local storage, even after a page refresh. Despite being new ...