I receive this error:
webpackHotDevClient.js:60 WebSocket connection to 'wss://{url}/sockjs-node' failed: ./node_modules/react-dev-utils/webpackHotDevClient.js
{"name": "packspace",
"version": "0.1.0",
"private": true,
"dependencies": {
"#loadable/component": "^5.14.1",
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
url.format({
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
port: process.env.WDS_SOCKET_PORT || window.location.port,
// Hardcoded in WebpackDevServer
pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
slashes: true,
})
);
// Unlike WebpackDevServer client, we won't try to reconnect
// to avoid spamming the console. Disconnect usually happens
// when developer stops the server.
connection.onclose = function () {
if (typeof console !== 'undefined' && typeof console.info === 'function') {
console.info(
'The development server has disconnected.\nRefresh the page if necessary.'
);
}
};
Working in React app and the app is deployed to server. It is working normally on localhost but I am getting the error that above at the title when I enter the deployed URL with https or http. I checked the answer in React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS but my file is already like that.
How can I fix that error?
Related
I have setup proxy in react package.json but the request is being sent to client-server instead of backed API I am using axios to consume API
my package.json
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"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"
]
},
"proxy": "http://localhost:8000/api"
}
sample request
useEffect(() => {
const fetchPost = async () => {
const response = await axios.get(
"posts/timeline"
);
};
fetchPost();
}, []);
the request URL in the network tab is http://localhost:3000/posts/timeline
if anyone has fixes please suggest them.
Proxy Errors
Im getting an error:
Proxy error: Could not proxy request /api/calendar/get-events?start=2022-05-28T23:00:00.000Z&end=2022-07-09T23:00:00.000Z from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
Proxy error: Could not proxy request /api/calendar/get-events?start=2022-05-28T23:00:00.000Z&end=2022-07-09T23:00:00.000Z from localhost:3000 to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
Have tried searching the internet for fixes to no avail so far.
{
"name": "res-app",
"version": "0.1.0",
"private": true,
"proxy": {
"/api/*": {
"target": "http://localhost:3000",
"secure": false
}
},
"dependencies": {
"#fullcalendar/daygrid": "^5.11.0",
"#fullcalendar/react": "^5.11.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"moment": "2.29.3",
"react": "^18.2.0",
"react-datetime": "^3.1.1",
"react-dom": "^18.2.0",
"react-modal": "^3.15.1",
"react-scripts": "5.0.1",
"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"
]
}
}
1.Now i'm building a React-Laravel app. React.js is frontend and Laravel is backend. React is running on port http://localhost:3000 and Laravel is running on port http://127.0.0.1:8000. I set up proxy on package.json file to be http://127.0.0.1:8000. Here is the code for package.json file.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "^5.0.0",
"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"
]
},
"proxy": "http://localhost:8000"
}
2.Then I tried to do some very simple tests, send data to Laravel back end (\signin route).Here are the code for frontend and backend
export default function Login(){
function handleSubmit (event) {
event.preventDefault();
fetch("/signin", {
method:"POST",
cache: "no-cache",
headers:{
"content_type":"application/json",
},
body:JSON.stringify({username: 'example' })
}
).then(response => {
return response.json()
})
// .catch((error) => console.log(error.message));
};
return (
<div>
<NavBar />
<PageHeading headingName={"Playground Manager Login"} />
<form className="form-signin" onSubmit={handleSubmit}>
<br/><br></br>
<EmailInputText />
<PasswordInputText />
<ForgotPasswordLabel/>
<SignupButton />
</form>
<Footer />
</div>
)
}
Laravel :
Route::post('/signin', function(Response $response) {
return $response;
});
Then I got the error below. The remote request url is http://localhost:3000/signin. I think this one should be http://localhost:8000/signin since I set up the proxy in the package.json file. Can someone tell me why the proxy did not work properly?
I have a Create React App working well in development mode both with
yarn start
and
yarn build > serve -s build
But when I upload my build folder to my distant server (on Planet Hoster), I get the following errors :
GEThttps://www.mysite.fr/static/js/main.f79317f8.js
[HTTP/2 404 Not Found 273ms]
GEThttps://www.mysite.fr/static/css/main.43a07738.css
[HTTP/2 404 Not Found 272ms]
What's happening here ? I've been working days and days on it and I still can't find something... Any help will be greatful !
My code to launch my express server :
const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(path.join(__dirname, "build")));
app.get("/", function (req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
[EDIT] - Here is my package.json file if it can helps :
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"cors": "^2.8.5",
"express": "^4.17.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.2.1",
"react-router-dom": "^6.2.1",
"react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4",
"webpack": "^5.67.0"
},
"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"
]
}
}
I am coming back to it lately but I finally found the solution.
To achieve it, I ran locally node app.js wich is the file that launch my frontend service. I then found in my logs that my script was trying to "modify the headers of my site after they were sent". I fix it and now it works.
My code was probably not that clean.
Still, thank you for your help !
This is my package.json in react.
{
"name": "reactjs",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8080",
"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"
]
}
}
I used proxy in the package.json file but it doesn't work for me. after adding this proxy it didn't show any error but also host in local host3000.
React is regularly front-end framework. This means at the end of the day, It will be built to bunch of js file. Hence react-scripts build. You should deploy those files to a proper HTTP server that can serve static files. Check this out for making HTTP file server out of node https://stackoverflow.com/a/16350826/3849555 . react-scripts start is just starting web server for development-purpose only. Do not use it as real web server.