reactjs - React won't load page "You need to enable JavaScript to run this app." - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm going through this tutorial

It works until I get to this step: Add a proxy by opening up package.json and the following entry:

"proxy": "http://localhost:5000"   

Now when I rerun yarn start the same page doesn't render on http://localhost:5000, but if I remove that proxy line from the package.json it still renders on http://localhost:3000.

I see these errors in the console:

manifest.json:1          GET http://localhost:5000/%PUBLIC_URL%/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

And in the html I see:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

When I remove the proxy entry in the package.json I also get this in html after:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
  <div class="App">
    <div>No pizzas</div>
  </div>
</div>

Here is my package.json:

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-ponents": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-ponents": "^5"
  }
}

And my Main.js:

import React, { useEffect, useState } from "react";
import styled from "styled-ponents";

const PizzaFrame = styled.div`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)`
    text-transform: uppercase;
`;

const Save = styled.button`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
    </PizzaFrame>
    </React.Fragment>)
}

const Main = () => {
  const [pizzas, setPizzas] = useState([]);
  useEffect(() => {
    fetchData();
  }, [])

  function fetchData() {
    fetch("/api/pizza")
      .then(response => response.json())
      .then(data => setPizzas(data))
  }

  const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

  return (<React.Fragment>
    {pizzas.length === 0 ?
    <div>No pizzas</div> :
    <div>{data}</div>
    }
  </React.Fragment>)
}

export default Main;

I'm going through this tutorial https://learn.microsoft./en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api

It works until I get to this step: Add a proxy by opening up package.json and the following entry:

"proxy": "http://localhost:5000"   

Now when I rerun yarn start the same page doesn't render on http://localhost:5000, but if I remove that proxy line from the package.json it still renders on http://localhost:3000.

I see these errors in the console:

manifest.json:1          GET http://localhost:5000/%PUBLIC_URL%/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

And in the html I see:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

When I remove the proxy entry in the package.json I also get this in html after:

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
  <div class="App">
    <div>No pizzas</div>
  </div>
</div>

Here is my package.json:

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-ponents": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-ponents": "^5"
  }
}

And my Main.js:

import React, { useEffect, useState } from "react";
import styled from "styled-ponents";

const PizzaFrame = styled.div`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)`
    text-transform: uppercase;
`;

const Save = styled.button`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
    </PizzaFrame>
    </React.Fragment>)
}

const Main = () => {
  const [pizzas, setPizzas] = useState([]);
  useEffect(() => {
    fetchData();
  }, [])

  function fetchData() {
    fetch("/api/pizza")
      .then(response => response.json())
      .then(data => setPizzas(data))
  }

  const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

  return (<React.Fragment>
    {pizzas.length === 0 ?
    <div>No pizzas</div> :
    <div>{data}</div>
    }
  </React.Fragment>)
}

export default Main;

• javascript
• reactjs

Share Improve this question Follow edited Apr 5, 2022 at 10:48 Matthias Wiedemann 1,6291515 silver badges2727 bronze badges asked Apr 4, 2022 at 19:18 MitchMitch 59622 gold badges1212 silver badges3232 bronze badges 1

• "page doesn't render on localhost:5000"... you're not meant to open that URL in your browser – Phil Commented Aug 3, 2023 at 1:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

The value in proxy is meant to be the server, which should provide the data, which the react application is fetching. Therefore, this server needs to be started as well (step 4 in your tutorial).

• localhost:3000 serves the react app (the frontend)
• localhost:5000 serves the backend (the mock server)

The react development tools provides the proxy mechanism as a help. When the proxy is set, you can call it by a URL without hostname. i.e. /api/pizza.

When you exchange your backend API mock with the real implementation, you need to change this to whatever port you service is running at (5059 in your tutorial).

本文标签： reactjsReact won39t load page quotYou need to enable JavaScript to run this appquotStack Overflow