I am trying to render my React app through NodeJS and deploy it on Heroku. but I seem to have this problem in the browser
Uncaught SyntaxError: Unexpected token '<'
and the page is a blank white page.
I tried so many solutions but I don't seem to know what is wrong and why won't the homepage show up.
My Package.json in NodeJS
{
"name": "portfolio-app",
"version": "1.0.0",
"description": "a simple app",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
"start": "node app.js",
"client": "cd client && npm run start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon app.js\" \"npm run client\""
},
"dependencies": {
"body-parser": "^1.19.0",
"concurrently": "^5.2.0",
"create-react-app": "^3.4.1",
"express": "^4.17.1",
"mongoose": "^5.9.6",
"nodemon": "^2.0.2"
},
"engines": {
"node": "10.x"
}
}
my package.json in React App
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"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"
]
},
"proxy": "http://localhost:8080"
}
my app.js server file:
const express = require('express'),
app = express(),
bodyParser = require('body-parser'),
nav = require('./routes/navigation'),
path = require('path'),
PORT = process.env.PORT || 8080;
/* Settings */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname + '/public'));
/*Production settings*/
if(process.env.NODE_ENV === "production"){
app.use(express.static(path.join(__dirname, 'client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
}
/* Starting server */
app.listen(PORT, () => {
console.log(`APP IS RUNNING ON PORT ${PORT}`);
});
After research, I found that the problem was in the Heroku builder so I added this builder
to the Heroku app:
https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
and the problem was solved.
I think the problem with Heroku and I prefer to separate the backend and frontend by pushing your react app to netlify and your node backend to heroku
Related
This question already has an answer here:
ES6 import happening before .env import
(1 answer)
Closed 3 months ago.
I am building a node.js program using ES6 standard.
Here is my package.json:
{
"name": "react18es6",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"activedirectory": "^0.7.2",
"bootstrap": "^5.1.3",
"cross-env": "^7.0.3",
"dotenv": "^16.0.3",
"express": "^4.18.1",
"mysql2": "^2.3.3",
"nodemon": "^2.0.20",
"npm-run-all": "^4.1.5",
"react": "^18.1.0",
"react-bootstrap": "2.2.1",
"react-dom": "^18.1.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"build": "react-scripts build",
"dev": "cross-env NODE_ENV=development run-p server start",
"eject": "react-scripts eject",
"prod": "cross-env NODE_ENV=production npm run server",
"server": "nodemon -r dotenv/config ./server/index.js",
"start": "react-scripts start",
"testServer":"cross-env NODE_ENV=development node -r dotenv/config ./server/index.js",
"test": "react-scripts test"
},
"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"
]
}
}
My .env.development:
DATABASE_CHARSET=utf8
My config.js:
export class dbConfig{
static charset =process.env["DATABASE_CHARSET"];
}
My index.js:
import dotenv from 'dotenv';
import {dbConfig} from './config.js';
dotenv.config({ path: '.env.'+process.env.NODE_ENV });
console.log(dbConfig);
console.log(process.env["DATABASE_CHARSET"])
I am using the following command to execute the code:
npm run testServer
The output of index.js is as the following:
[class dbConfig] {
charset: undefined
}
utf8
Why the dbConfig.js can not get the environment variable?
I have tried the suggested solution, but unfortunately, it does not work.
I am inspired by Dream Bold, the config.js is changed as the following:
import dotenv from 'dotenv';
export default class dbConfig{
static{
dotenv.config({ path: '.env.'+process.env.NODE_ENV });
this.charset =process.env["DATABASE_CHARSET"];
}
}
It works.
You need to add this on top of your My config.js file so it can read from process.env
import dotenv from 'dotenv';
Or
require('dotenv').config();
I want to display code coverage for testing React in Cypress
The package.joson look like this
{
"name": "guitesttraining",
"version": "0.1.0",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/components/**/*.js"
],
"coverageReporters": [
"cobertura",
"text"
]
},
"dependencies": {
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"jest-junit": "^13.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"serverless-finch": "^4.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject",
"cypress:run": "cypress run --record --key 3339aabe-1bcc-4f8c-8098-d08f47ac0b9b",
"postcypress:run": "npx nyc report --reporter=cobertura",
"cypress:open": "cypress open"
},
"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"
]
},
"devDependencies": {
"#cypress/code-coverage": "^3.9.12",
"#cypress/instrument-cra": "^1.4.0",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.2",
"cypress": "^9.5.2",
"cypress-jest-adapter": "^0.1.1",
"nyc": "^15.1.0"
}
}
The cypress/support/index.js
import './commands'
import 'cypress-jest-adapter'
import '#testing-library/cypress/add-commands'
import '#cypress/code-coverage/support'
The cypress/pluging/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
return config
}
After I have executed run start "react-scripts -r #cypress/instrument-cra start"
Console do not contain window.coverage object in the "Application under test iframe"
When I run npm run cypress:run I get a error message
- should toggel display and hide of details ⚠️ file /Users/steinko/development/cypresstaining/webtestingtraining/.nyc_output/out.json
has no coverage information Did you forget to instrument your web
application? Read
https://github.com/cypress-io/code-coverage#instrument-your-application
What must I do to instrument the web application?
I toght that running react-scripts -r #cypress/instrument-cra start instrumeneted the web application
I found a issue, instrument-cra still does not support react-scripts v5. After I try react-scripts v4.0.3, it does not work also.
I tried to deploy my MERN application on Heroku, but when tried to run "heroku local" localhost 5000 showed an empty page and the console show the following errors. These are the errors:
I've already tried so many solutions but none of them worked.
This is the package.json file from the node application:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"axios": "^0.21.1",
"bcrypt": "^5.0.1",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-handlebars": "^5.3.3",
"express-session": "^1.17.2",
"mongoose": "^5.13.7",
"nodemon": "^2.0.12",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"react-router": "^5.2.1"
},
"devDependencies": {},
"engines": {
"node": "14.16"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"cd client && npm run build",
"install-client":"cd client && npm install",
"start": "nodemon app.js",
"heroku-postbuild":"cd client && npm run install-client && npm run build"
},
"author": "",
"license": "ISC"
}
This is the code snippet added to the server.js
if (process.env.NODE_ENV == 'production') {
app.use(express.static('client/build'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
And this is the package.json from the react application
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"history": "^5.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"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 think problem might be server.js file cannot access properly build folder of the frontend/client. Can you delete all of this:
if (process.env.NODE_ENV == 'production') {
app.use(express.static('client/build'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});
And add this:
app.use(express.static(path.join(__dirname, './client/build')));
I assume your client folder and server.js file are at the same level, that's why it is ./client... If not, define path route accordingly. Please let me know if it works.
My package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"engines": {
"node": "14.x.x"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#codemirror/lang-python": "^0.19.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#uiw/react-codemirror": "^4.1.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"codemirror": "^5.63.3",
"express": "^4.17.1",
"pushstate-server": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.18.0",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "node server.js",
"start-dev": "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"
]
}
}
app.yaml:
env: standard
runtime: nodejs14
My server.js file through which I run the app:
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'));
});
app.listen(8080);
It starts the express server on the 8080 port and serves the build directory. When I run it on localhost, it works perfectly. But when I deploy it on Google App Engine with this command gcloud app deploy, it opens the app and writes this in the console:
Uncaught SyntaxError: Unexpected token '<' 2.cf168530.chunk.js:1
Uncaught SyntaxError: Unexpected token '<' main.3ec04766.chunk.js:1
Screenshot with the error. Also, this is a URL to my app if it'd be useful (please, don't remove the id query, otherwise it'll redirect you to the previous page from where you opened the app).
Jest is not finding all of my test files. It is ignoring a directory. When I run npm run jest:watch my tests in ./server and its subdirectories are tested but no tests are found in ./client
What I have tried
I have tried creating a generic test file and moving it around. I found it would work in the following circumstances.
I have also tried using a direct path to the file - which didn't work.
Possible causes
I think it may be something to do with the unusual directory structure I have
./client
./server
as opposed to
./server.js
./other server files..
./client/...client files
or it may be die to me trying to run jest from the node.js app and also have it look at files in the client directory (which contains an app written in React) - I don't care about running tests on react components (only modules). Alternatively it could be something to do with jest in the client directory messing things up.
filename
./server/middleware
./
./client
delete.test.js
found by jest
found by jest
not found
My setup
my folder structure looks like this
./
./client (react client app)
./client/package.json
./client/node_modules
package.json
node.modules
./server (node.js api app)
./server/package.json
my jest is running from the ./package.json file.
Other things I have tried
I have tried using direct paths for my file the below code works
"testMatch": ["<rootDir>/server/delete.test.js"],
but this code (in the folder I want) does not
"testMatch": ["<rootDir>/client/delete.test.js"],
code setup
./package.json
{
"name": "Infoshot",
"version": "0.0.4",
"description": "Research Tool",
"main": "cd ./server && server.js",
"scripts": {
"start": "cd ./server && node server.js",
"server": "cd ./server && nodemon server.js",
"client": "npm start --prefix ./client/",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd ./client && NPM_CONFIG_PRODUCTION=false npm install && CI= npm run build",
"compile-saas": "node-sass ./client/src/scss/a_main.scss ./server/nodeClient/public/css/main.css -w",
"test": "jest",
"test:watch": "npm run test -- --watch"
},
"jest": {
"testEnvironment": "node",
"testPathIgnorePatterns": [
"./node_modules"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.0",
"bcryptjs": "^2.4.3",
"config": "^3.2.2",
"dotenv": "^8.2.0",
"ejs": "^3.1.5",
"enzyme": "^3.11.0",
"express": "^4.17.1",
"express-validator": "^6.2.0",
"ijavascript": "^5.2.0",
"jest": "^26.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.7.0",
"nodemailer": "^6.4.14",
"nodemailer-sendgrid": "^1.0.3"
},
"devDependencies": {
"concurrently": "^4.1.2",
"node-sass": "^5.0.0",
"nodemon": "^1.19.2"
}
}
delete.test.json
describe.only('DELETE TEST: getDocument', () => {
test('Say Hi', async () => {
const bum = 'bum';
expect(bum).toBe(bum);
});
});
./client/package.json
As I said earlier I don't think this is relavant as it is not be run as I am running jest from ./server with npm run jest:watch
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"config": "^3.3.2",
"dotenv": "^8.2.0",
"enzyme-adapter-react-16": "^1.15.3",
"node-sass": "^4.14.1",
"react": "^16.9.0",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.4",
"react-transition-group": "^4.3.0",
"serve": "^11.3.2",
"styled-components": "^5.1.1",
"uuid": "^3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"previewProd": "react-scripts build && serve"
},
"jest": {
"collectCoverageFrom": [
"src/components/documentEditor/*.js",
"<rootDir>/server/",
"!<rootDir>/node_modules/",
"!<rootDir>/src/index.js",
"!<rootDir>/src/registerServiceWorker.js"
]
},
"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"
]
},
"proxy": "http://localhost:5000",
"devDependencies": {
"#testing-library/react": "^10.4.9"
}
}
I found that if I removed all the mentions of jest in the ./client/package.json and also replaced the ./package.json with
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**"
]
it worked.