I deployed react app successfully to Heroku but when click app link in terminal new window displays "Application Error" and error message in terminal states the following:
"import { Server } from 'socket.io'; SyntaxError: The requested module 'socket.io' does not provide an export named 'Server'
Server.js
import http, { request } from 'http';
import { Server } from 'socket.io';
const httpServer = http.Server(app);
const io = new Server(httpServer, { cors: { origin: '*' } });
const users = [];
package.json
{
"name": "app",
"type": "module",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"heroku-postbuild": "cd frontend && npm install && npm run build",
"start": "nodemon --watch backend --exec node --experimental-modules backend/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"dotenv": "^16.0.1",
"engine.io-client": "^6.2.2",
"express": "^4.18.1",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mailgun-js": "^0.22.0",
"mongoose": "^6.4.0",
"multer": "^1.4.5-lts.1",
"socket.io": "^4.5.1",
"socket.io-client": "^4.5.1"
},
"devDependencies": {
"nodemon": "^2.0.18"
},
"engines": {
"node": "12.4.0",
"npm": "6.9.0"
}
}
Related
I have a Nodejs API that sends responses to a react application.
When I send a request for user information on login, the request succeeds and I get back a proper response. The thing is after I sent an initial request to log in, I get back the this response.
You need to enable JavaScript to run this app.
This only happens in production. Locally it's fine. Even doing a production build locally works just fine. It's only when I deploy to my AWS containers.
Here is my API package.json
{
"name": "my-api",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "nodemon ./bin/www",
"prod": "sudo forever stopall && forever start ./bin/www",
"start": "node ./bin/www",
"seed": "node ./setup/seed.js"
},
"engines": {
"node": ">= 12.0.0"
},
"dependencies": {
"aws-sdk": "^2.738.0",
"bcryptjs": "^2.4.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"braintree": "^3.5.0",
"compression": "^1.7.4",
"connect-pg-simple": "^6.2.1",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"express": "^4.16.4",
"express-session": "^1.17.1",
"file-type": "^14.7.1",
"formik": "^2.1.4",
"fs": "0.0.1-security",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"multiparty": "^4.2.2",
"nodemailer": "^6.6.2",
"nodemailer-smtp-transport": "^2.7.4",
"nodemon": "^2.0.4",
"pg": "^8.2.1",
"pg-hstore": "^2.3.3",
"pg-transaction": "^1.0.4",
"uuid": "^8.3.2",
"winston": "^3.3.3"
}
}
Here is my application API.
const httpProxy = require("http-proxy");
const https = require("https");
const fs = require("fs");
const appConfig = require("./config");
const appPath = `./app.${appConfig.isProduction ? "prod" : "dev"}`;
const logger = require("./utils/logger");
const app = require(appPath);
const apiProxy = httpProxy.createProxyServer();
const ACUTAL_API = process.env.ACTUAL_API || "http://localhost:8181";
app.set("x-powered-by", false);
app.all("/api/*", function (req, res) {
logger.info("reverse proxying to api");
console.log("reverse proxying");
apiProxy.web(req, res, { target: ACTUAL_API });
});
if (!appConfig.isProduction) {
app.listen(appConfig.port, () => {
logger.info(`Server started at: http://localhost:${appConfig.port}`);
});
} else {
https
.createServer(
{
/* Certificate Managed By AWS ACM */
key: fs.readFileSync("./certificates/localhost.key"),
cert: fs.readFileSync("./certificates/localhost.crt"),
passphrase: "",
},
app
)
.listen(appConfig.port);
}
Application API app.prod.js
const express = require("express");
const app = express();
const path = require("path");
const BUILD_DIR = path.join(__dirname, "../build/");
console.log(BUILD_DIR);
app.use(express.static(BUILD_DIR));
const HTML_FILE = path.join(BUILD_DIR, "index.html");
app.get("*", (req, res) => res.sendFile(HTML_FILE));
module.exports = app;
Application API Package.json
{
"name": "proxy-server",
"version": "1.0.0",
"description": "proxy server for web",
"main": "index.js",
"scripts": {
"start": "nodemon ./",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "YoMommasKrypton",
"license": "ISC",
"dependencies": {
"babel-register": "^6.26.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"express": "^4.17.1",
"express-http-proxy": "^1.6.2",
"glob": "^7.1.6",
"node-env-file": "^0.1.8",
"winston": "2.3.1"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
}
Picture of my React application with all the files
My src files
I am unable to deploy my application on Heroku.
My package.json for outer (backend) file
{
"name": "teams-clone",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js && cd client && npm start"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"redis": "^3.1.2",
"socket.io": "^4.1.2"
}
}
My server.js file
require("dotenv").config();
const express = require("express");
const http = require("http");
const bodyParser = require("body-parser");
const cors = require("cors");
const port = process.env.PORT;
const app = express();
const server = http.createServer(app);
const Routes = require("./app/routes");
app.use([
cors(),
bodyParser.json(),
bodyParser.urlencoded({ extended: false }),
Routes,
]);
const io = (module.exports.io = require("socket.io")(server, {
cors: {
origin: "*",
},
}));
const socketManager = require("./app/socketManager");
io.on("connection", socketManager);
server.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
My client package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#syncfusion/ej2-react-schedule": "^19.1.69",
"#testing-library/jest-dom": "^5.14.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"ejs": "^3.1.6",
"express": "^4.17.1",
"moment": "^2.29.1",
"node-sass": "^4.14.1",
"react": "^17.0.2",
"react-calendar": "^3.4.0",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"shortid": "^2.2.16",
"simple-peer": "^9.11.0",
"socket.io": "^4.1.2",
"socket.io-client": "^4.1.2",
"web-vitals": "^1.1.2"
},
"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 also have this piece of code for socket connections in my client:
let peer = null;
const socket = io.connect("http://localhost:4000");
const initialState = [];
I have changed it to the heroku link while deploying instead of local host 4000
my apiEndpints BASE_URL now is:
http://localhost:4000
which I changed it to the heroku link while deploying instead of local host 4000
How my application starts is:
first switch on Redis.exe -> node server.js -> cd client -> npm start
I also made a Procfile with=> web: node server.js
What am I doing wrong?
I have a React front end and Node with Express server. When I build and run it on my computer everything works perfect. When I build and run it on my Azure Ubuntu VM the server starts successfully and it hosts the React front end and I can access it no problem. But I get a "net::ERR_CONNECTION_REFUSED" in the console when it tries to access the node server. I then noticed that if my server was running on my computer the React app hosted on the Azure VM would hit the server on my local computer and not the one on the Azure VM.
So, how do I get the React app hosted on the VM to properly point to the server/vm it is hosted from?
The file structure of the app is:
>App Root
>client
>build
>public
>src
>components
>reducer, assets, middleware, services
App.js
http-common.js
index.js
package.json
>server
>config, controllers, models, routes
package.json
server.js
server.js
const bodyParser = require("body-parser");
const cors = require("cors");
const morgan = require('morgan');
const path = require('path');
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(express.static(__dirname + '/client/build'));
app.use(morgan('dev'));
app.use(bodyParser.urlencoded({ extended: true }));
const db = require("./server/models");
db.sequelize.sync();
require("./server/routes/h.routes")(app);
require("./server/routes/p.routes")(app);
require("./server/routes/user.routes")(app);
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '/client/build/index.html'), function(err) {
console.log('In sendFile of get /*')
if (err) {
console.log('error: ', err)
res.status(500).send(err)
}
})
})
const port = 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));
server package.json
"name": "test",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"start:dev": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"morgan": "^1.10.0",
"mysql": "^2.18.1",
"mysql2": "^2.2.5",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"sequelize": "^6.6.2"
},
"devDependencies": {
"nodemon": "^2.0.7"
}
"proxy": "http://localhost:5000"
}
http-common.js
export default axios.create({
baseURL: "http://localhost:5000/api",
headers: {
"Content-type": "application/json",
},
});
client package.json
"name": "tissue-screener",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.57",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"dotenv": "^8.2.0",
"msal": "^1.4.10",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.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"
]
},
"main": "../server.js",
"proxy": "http://localhost:5000"
}
I figured out the answer and decided to share it here in case anyone else makes the same dumb mistake I did.
http-common.js
export default axios.create({
baseURL: "/api",
headers: {
"Content-type": "application/json",
},
});
That's it. Just had to remove the "http://localhost:5000" from the axios.create and let the proxy setting in the package.json do it's work.
I don't know what's going wrong with these extensions, when I provide the extension ".js" the app runs fine but it gives a warning on that line saying Unexpected use of file extension "js" for "./models/user.js", but when I remove the extension the whole app crashes and says Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\React\AuthenticationApp\backend\src\models\user' imported from F:\React\AuthenticationApp\backend\src\index.js, I know that files can be imported in node.js without providing the extension but I just know-how
here's my code
// eslint-disable-next-line no-unused-vars
import express from 'express'
import User from './models/user'
import './db/mongoose'
const app = express()
const port = 4000
app.use(express.json())
app.post('/users', (req, res) => {
const user = new User(req.body)
user
.save()
.then(() => {
res.send(user)
console.log(user)
})
.catch((e) => {
res.status(401).send(e)
})
})
app.listen(port, () => {
console.log(`Server is up on ${port}`)
})
and this is package.json
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"type": "module",
"scripts": {
"build": "babel ./src --out-dir ./build",
"start": "nodemon --exec babel-node src/index.js",
"dev": "nodemon src/index.js",
"lint": "eslint ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.13.16",
"#babel/core": "^7.13.16",
"#babel/node": "^7.13.13",
"#babel/preset-env": "^7.13.15",
"#babel/runtime": "^7.13.17",
"eslint": "^7.25.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.4.0",
"nodemon": "^2.0.7",
"prettier": "^2.2.1"
},
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.12.6",
"validator": "^13.6.0"
}
}
Adjust your eslint config with this rule:
"rules": {
"import/extensions": [
"error",
{
"js": "ignorePackages"
}
]
},
Detailed description of the rule is in this page.
That way a nodejs will successfully run, eslint will not show error.
CommonJS modules are still able to be without extension in 'require' functions.
But you have to specify an extension of ESmodule when using 'import' (except 'Bare specifiers' like 'some-package'), this is according to nodejs docs.
My app's front-end is Reactjs and backend is Node js. I used express server and graphql-express server. I deployed my app successfully. But it starts with data is loading and then nothing shows. But if I run locally npm start then the heroku app is start working.
This is the error I get it in browser
This is my server's package json file. If i run in terminal npm run dev. It opens my react js app.
{
"name": "backend",
"version": "1.0.0",
"description": "personish vol 2",
"main": "server.js",
"scripts": {
"start": "node server.js",
"server": "node server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Alak",
"license": "ISC",
"dependencies": {
"concurrently": "^5.0.2",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-graphql": "^0.9.0",
"graphql": "^14.5.8",
"pg": "^7.15.1",
"pg-hstore": "^2.3.3",
"sequelize": "^5.21.3"
}
}
This is my react's package json
{
"name": "client",
"version": "0.1.0",
"private": true,
"engines": {
"node": "13.3.0",
"npm": "6.13.0"
},
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"apollo-boost": "^0.4.7",
"axios": "^0.19.0",
"firebase": "^7.6.1",
"graphql": "^14.5.8",
"pg": "^7.15.1",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-dom": "^16.12.0",
"react-dropzone": "^10.2.1",
"react-redux": "^7.1.3",
"react-redux-firebase": "^3.0.5",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.4",
"redux-firestore": "^0.11.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is my express and graphql-express server.
const express = require("express");
const app = express();
const graphqlHTTP = require("express-graphql");
const schema = require("./schema");
const cors = require("cors");
const path = require("path");
app.use(cors());
app.use(
"/graphql",
graphqlHTTP({
schema,
pretty: true,
graphiql: true
})
);
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", (req, res) => {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
const port = process.env.PORT || 8081;
app.listen(port, () =>
console.log(`✅ Example app listening on port ${port}!`)
);
This is my react's app file. Where I use Apollo boost to connect with react app and node js app. I think the error comes from here, dont know how to fix it
import React from "react";
import { ApolloClient, HttpLink, InMemoryCache } from "apollo-boost";
import { ApolloProvider } from "react-apollo";
const client = new ApolloClient({
link: new HttpLink({
uri: "http://localhost:8081/graphql"
}),
cache: new InMemoryCache()
});
This is my heroku app
https://databaseapp2020.herokuapp.com/
your heroku dyno/app would have a name, you would use that to hit your graphql from say a graphiql playground on your laptop, or your react-app... if your heroku app was actually named databaseapp2020 and running then you would use the following assuming your cors was setup properly in the dyno environment variables
https://databaseapp2020.herokuapp.com/graphql