Encountering a 304 status error in the HTTP GET response after deploying a React app on Netlify

  • After deploying my react application on Netlify, I used the npm run build command to create the local scripts and manually deployed them in production mode on Netlify.
  • The build scripts were generated on my local machine and then uploaded to the Netlify site, resulting in a successful deployment message.
  • However, when I clicked on the URL link, it initially displayed a 404 status for the GET request of the build scripts.
  • To resolve this issue, I included a redirects file in the build folder which changed the status to 304 for the GET request but now showed an error stating: "syntax error: uncaught error: unexpected token <"
  • In an attempt to debug this problem, I commented out certain files and ran the code again to find the root cause without success.
  • If anyone can offer suggestions or point out where I may have made a mistake, it would be greatly appreciated.
  • You can access the deployed application on the following Netlify URL link:
  • The source code for the application is available on GitHub at: https://github.com/aarivalagan/react-one
  • I have also attached screenshots of the application below for reference:
  • Below is a snippet of the code:

_redirects

/*     /index.html   200!

package.json

"scripts" : {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

https://i.stack.imgur.com/HV0q5.png

Answer №1

If you plan on adding a _redirects file to your create react app, it should be placed in the public folder. It is recommended not to include the build folder in your repository for platforms like Netlify that handle continuous builds.

The purpose of the _redirects file mentioned here is typically for single page apps using a router such as react-router, where a specific path should always lead to

index.html</code when no other content is found at that location. It's important that this does not interfere with resolving asset paths.</p>

<blockquote>
  <p>This redirect rule ensures that index.html is served instead of showing a 404 error regardless of the URL requested by the browser.</p>
</blockquote>

<p><code>_redirects

/*    /index.html   200

By implementing this rule, you are ensuring that index.html is displayed even if there isn't a valid path, which may currently be causing issues with loading assets.

  • Address the original problem
  • Place the _redirects file in the public folder
  • Remove the ! from the end of redirects to allow paths to resolve correctly without always defaulting to index.html

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

Tips for effectively incorporating customized validation into an array using vuelidate

My array of objects has a specific structure that looks like this varientSections: [ { type: "", values: [ { varientId: 0, individualValue: "" } ] } ] To ensure uniqueness, I implemented a c ...

Enhance your auto suggestion feature using debounce and distinctUntilChanged in React

Objective: I aim to create an optimal search field that will only trigger API calls under the following conditions: After a debounce time of 350ms AND when there's a change in the input field value. Methods Attempted: To monitor changes in the i ...

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

What causes tests to fail with an error message SyntaxError: Unexpected token {?

Hey there! I'm encountering an issue with webpack 5 and babel while trying to run tests that were previously written. Despite following the jest documentation for configuration, I haven't been able to find a solution after exploring various forum ...

Unexpected behavior with if statements in jQuery

Having recently started using jQuery, I am embarking on the creation of a survey. Each question within the survey resides in its own div and is unveiled upon clicking the "Next" button. Currently, all divs are hidden except for the current one. My approach ...

How come the redirection doesn't seem to be working properly on Next.js when I try to manually enter the URL?

I'm currently in the process of building a web application that utilizes React and Next.JS as the backend, with Firebase serving as the database. Everything related to data fetching is functioning correctly; however, I've encountered an issue wit ...

What is the best way to utilize the GET Method with a hashtag incorporated into the URL?

For instance: www.sample.com#?id=10 Currently, I am not able to retrieve any value from $_GET['id']. Despite my attempt to eliminate the hashtag from the URL using JavaScript, no change occurs: $(document).ready(function(){ $(window.location ...

React hooks eliminating unnecessary rendering

Having recently delved into React and hooks, I'm facing an issue with refreshing the list of files in my app after clicking on the convert button. The correct file only shows up if I manually refresh the page. The React part of the code involves uplo ...

Deploying app and server with Heroku using Node and Angular

I have a straightforward project that I am working on. The link to the project is available here. Locally, I launch the project using the following commands: npm install cd BTCash/server/ node app.js cd BTCash/ npm start I attempted deploying it on Hero ...

When using React Final Form, the onBlur event can sometimes hinder the

What is the reason that validation does not work when an onBlur event is added, as shown in the example below? <Field name="firstName" validate={required}> {({ input, meta }) => ( <div> <label>First Name</label& ...

Issue with Ajax reappearing the second time

Currently, I am experiencing an issue with the sorting function on search results. After performing a search, if I try to change the value in the dropdown for filtering the number of results per page, it works fine for the first time. However, upon further ...

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

Confirming user banking information is necessary solely for account activation through Stripe

I've been working with NodeJS and ExpressJS Is there a way to set up account verification with Stripe? I want to confirm that users have bank accounts without charging them. What kind of information can I access through this verification process? My ...

Having trouble getting Material UI Tooltip to function properly with the options in react-select?

I need a tooltip to be displayed on the options of react-select. I've seen that @atlaskit/tooltip works perfectly for this, but I'm trying to achieve the same functionality using material UI tooltip without success. Can someone please provide me ...

I need help determining the starting date and ending date of the week based on a given date

I am looking to determine the starting date (Monday) and ending date of a specified date using Javascript. For instance, if my date is 2015-11-20, then the starting date would be 2015-11-16 and the ending date would be 2015-11-21. ...

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...

sharing AMD modules between multiple files

As of now, I am in the process of constructing the Ember.SimpleAuth library - a tool designed for facilitating authentication and authorization within Ember.js applications (https://github.com/simplabs/ember-simple-auth/tree/sub-packages). This library pro ...

How can we develop a strategy to select products based on specific features while keeping costs minimized?

I've got a collection of products with varying costs and features. Each product offers a unique set of features. I'm in need of an algorithm that, when given the specific features I desire, can recommend the most cost-effective combination of pr ...

Struggling to import a React component for sharing purposes

I've developed a React component that I want to share through a locally hosted npm repository. To achieve this, I created the React component using typescript, transpiled it to JavaScript, and then published the resulting code to the repository. Howe ...

How to Turn Off Browser Autocomplete for Material-UI TextField

I am currently utilizing the country select feature from Material UI (https://material-ui.com/components/autocomplete/#country-select). One issue I have encountered is that when the user clicks on the input field, the browser's autocomplete popup cove ...