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

What methods does Enzyme have for determining the visibility of components?

I am facing an issue with a Checkbox component in my project. I have implemented a simple functionality to hide the checkbox by setting its opacity : 0 based on certain conditions within the containing component (MyCheckbox) MyCheckBox.js import React fr ...

When you input text into a contenteditable div, it automatically gets placed inside a span element instead of being placed

I'm having an issue with my contenteditable div. Whenever I click the button, a span is inserted into the div. However, when I start typing, the text goes inside the span instead of outside it: jQuery(document).ready(function($) { let input = $(" ...

Running Selenium tests are not able to initiate Javascript ajax requests

I'm currently troubleshooting a scenario using Selenium that involves the following steps: - When a user inputs text into a textarea, an ajax request is sent, which then adds the text to the database (implemented using django and processed in view.py) ...

Identify the credit card as either American Express or American Express Corporate

My JavaScript code can successfully detect credit card types, but I have encountered an issue. I am unable to differentiate between American Express and American Express Corporate cards. Is there a way to distinguish them or is it impossible to identify wh ...

What's the best way to implement an NPM package in a Deno application?

I am curious about integrating the NPM package into my Deno application. Can anyone guide me on how to achieve this? ...

Utilizing the power of JavaScript to specifically prevent the default behavior within an ASP server control

An ASP.NET server control is used in the code snippet below: <asp:HyperLink Visible='<%# (GetAnswer(Eval("AnsQID"))) != 1 %>' ID="HyperLink1" runat="server" NavigateUrl="#" ToolTip='Like this answer' onclick="javascript:( ...

Retrieving data from a file results in receiving blank strings

Struggling to access the data within a directory of files, I've encountered an issue where the data doesn't seem to be read correctly or at all. Even though there is content when opening the files individually, when attempting to examine their co ...

Validating alpha-numeric passwords with JavaScript

I created a JavaScript function to validate if a password is alphanumeric. However, I am facing an issue where the alert message is not being displayed when the password is not alphanumeric. Below is my code snippet: if (!input_string.match(/^[0-9a-z]+$ ...

Images from the API are not displaying properly on my front-end application

Currently, I am developing an application using React on the front-end and Express on the back-end to prevent any issues with Cross-Origin Resource Sharing (CORS). The JSON data for my API is coming from "Zoho Creator." Here is an illustration: https://i.s ...

What is the best way to conceal a Material UI button with CSS?

For my TODO react app, I am using a Material UI button. My goal is to create a form with an input field and a submit button, but I want the submit button to be invisible so that users think the form submits when they press the "Return" key. import { Tex ...

Keystroke to activate Ant Design Select and start searching

I'm currently using the 'react-hotkeys-hook' library and have successfully implemented a hotkey that logs in the console when triggered (via onFocus()). My goal now is to use a hotkey that will open a Select component and add the cursor to i ...

Clicking on Bootstrap Select Does Not Trigger Dropdown Opening

Currently, I am working on generating a dynamic set of bootstrap-select widgets that include a dropdown. My main challenge lies in preventing the select from closing the dropdown, which requires me to use 'event.stopPropagation()' on the dropdown ...

An app activation code 401 error suddenly appears, prompting a quick response to refresh the token in the axios interceptor feature

AxiosConfig.js import axios from "axios"; import { store } from "./redux/store"; import { login, logout } from "./redux/slices/user"; const baseURL = process.env.NEXT_PUBLIC_API_URL; axios.defaults.baseURL = baseURL; expor ...

What is the recommended way to emphasize an input field that contains validation errors using Trinidad (JSF)?

Trinidad currently displays error messages and highlights labels of failed inputs after client-side form validation. However, I need to directly highlight the input fields themselves. Is there a way to achieve this without resorting to a hack like attach ...

The power of MobX lies in its ability to provide a deep

I'm currently delving into the concept of deep observability in MobX. I'm looking for insights on why the autorun function is not being triggered every time I call setCommentCountForPost in the code snippet below. Can someone point me in the rig ...

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

I have a good understanding of how to use jQuery's $.ajax: $.ajax({ url: //twitter endpoint, method:"GET", dataType:"jsonp", success:function() { //stuff } }); Is there a way to set the JSONP datatype for an angular $http service reque ...

Is the HTML Page loading before the AJAX call is made?

On my HTML Page, I have a button tag that looks like this: <button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button> However, when attempting to access certain parts of the alreadyFriends function shown b ...

Using Ajax to preview images results in displaying a broken image icon

I am currently working on implementing an image preview function using Ajax. As I was experimenting, a couple of questions came to my mind: Once the Ajax has been executed, is the actual image uploaded to the server or just an array containing strings l ...

Using Angular Material for creating tabs with identical content

I am using material with angularjs and have encountered an issue with my two md-tabs. Both tabs have a similar DOM structure, but contain some unique content. Instead of duplicating the common DOM twice, I am looking for an alternative solution. Is it poss ...

Tips for identifying selected rows in Material UI DataGrid

Currently, I am in the process of developing a website using React along with Material UI. My main focus right now is to identify which rows are currently selected in my DataGrid. To achieve this, I want to populate an array with the selected rows using t ...