I am trying to deploy on Heroku, where I'm given the following error:
remote: Failed to minify the code from this file:
remote: ./node_modules/webhoseio/webhoseio.js:13
Upon inspecting this dependency, I found that it uses the ES5 'use strict'; declaration. How can I have Heroku compile this dependency?
EDIT: Package.json file
{
"name": "stocks-app",
"version": "1.0.0",
"description": "Mern Demo",
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "babel-node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && yarn install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"concurrently": "^4.1.0",
"nodemon": "^1.18.9"
},
"dependencies": {
"alphavantage": "^1.2.0",
"axios": "^0.18.0",
"brain.js": "^1.6.0",
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"express": "^4.16.3",
"if-env": "^1.0.4",
"mdbreact": "^4.8.5-patch.1",
"mongoose": "^5.4.0",
"newsapi": "^2.4.0",
"request": "^2.88.0",
"webhoseio": "^1.0.2"
}
}
I resolved this by turning off minification in my Webpack config. Instead of using the CRA-preconfigured Webpack ES-Lint loader, I installed the HTML-Loader and set loader to that. Following, I set minimize to false. Here's how:
module: {
rules: [
{
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
minimize: false,
},
loader: require.resolve('html-loader'),
},
],}}
Related
I have the following package.json files for my app:
Client folder:
``{
"name": "nasa-fe",
"version": "1.0.1",
"private": true,
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"overrides": {
"nth-check#1.0.2": "2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "set BUILD_PATH=../server/public&& react-scripts build",
"test": "react-scripts test --passWithNoTests",
"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"
]
}
}
Server folder:
{
"name": "nasa-project-api",
"version": "1.0.0",
"description": "Nasa mission control api",
"main": "src/server.js",
"scripts": {
"test": "jest --detectOpenHandles",
"test-watch": "jest --watch",
"watch": "nodemon src/server.js",
"start": "node src/server.js",
"cluster": "pm2 start src/server.js -i max"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cors": "^2.8.5",
"csv-parse": "^5.3.3",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"mongoose": "^6.8.4",
"mongose": "^0.0.2-security",
"morgan": "^1.10.0",
"pm2": "^5.2.2",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"jest": "^29.3.1",
"nodemon": "^2.0.20",
"supertest": "^6.3.3"
}
}
and root folder:
{
"name": "nasa-exploration",
"version": "1.0.0",
"description": "This a full stack project",
"main": "index.js",
"scripts": {
"deploy": "set BUILD_PATH=../server/public && npm run build --prefix client && npm start --prefix server",
"deploy-cluster": "npm run build --prefix client && npm run cluster --prefix server",
"server": "npm run watch --prefix server",
"client": "npm start --prefix client",
"watch": "npm run server & npm run client",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yayoamigo/Nasa-exploration.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/yayoamigo/Nasa-exploration/issues"
},
"homepage": "https://github.com/yayoamigo/Nasa-exploration#readme",
"dependencies": {
"arwes": "^1.0.0-alpha.5",
"axios": "^1.2.4",
"dotenv": "^16.0.3",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "^5.0.1"
}
}
as you can see I have react-scripts in every folder but get this error regardless, I tried to reinstall the dependencies, change the scripts and nothing. The weird things is when I npm run build on my PC it works
Just checked the Workflow in your repo and I see that you are running the following commands:
...
- run: npm install
- run: npm run build --prefix client
...
According to this, the npm run build --prefix client will run the build under the client directory, but the first command installs dependencies under the root folder. The build just can't find dependencies since it's not installed in the client directory.
So you need to change your install command to use the prefix also:
npm install --prefix client
To read more about prefixes, visit the official docs.
Alternatively, you can use the working-directory keyword to specify the working directory of where to run the command:
- name: Install
working-directory: client
run: npm install
- name: Build
working-directory: client
run: npm run build
I have a react + express project where I do server side rendering. My folder structure is like this
root
client
build
node_modules
public
src
package.json
node_modules
routes
server.js
package.json
I have two Heroku dynos app-dev and app-prod and I use app-dev for development and app-prod for production and their environments have been set to dev and prod accordingly. My package.json looks like this
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server",
"server": "nodemon server",
"client": "npm start --prefix client",
"build": "cd client/ && npm install && npm run build",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"chalk": "^4.1.1",
"concurrently": "^6.1.0",
"connect-mongo": "^3.2.0",
"cookie-parser": "^1.4.3",
"cookie-session": "^2.0.0-beta.3",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.16.4",
"express-session": "^1.15.6",
"express-validator": "^6.11.1",
"mongoose": "^5.4.1",
"mongoose-findorcreate": "^3.0.0",
"morgan": "^1.10.0",
"passport": "^0.4.0",
"passport-google-oauth": "^2.0.0",
"passport-google-oauth20": "^2.0.0",
"passport-twitter": "^1.0.4",
"redux-thunk": "^2.3.0",
"http-proxy-middleware": "^2.0.0"
}
}
Now I have got a constants file in my client/src folder that had these
// Constants.js
const prod = {
url: {
SS_API_URL: 'https://prod.example.com',
},
keys:{
SS_CLIENT_ID: 'prodClientId',
SS_X_API_KEY: 'prodApiKey',
}
};
const dev = {
url: {
SS_API_URL: 'https://dev.example.com',
},
keys:{
SS_CLIENT_ID: 'devClientId',
SS_X_API_KEY: 'devApiKey',
}
};
export const config = process.env.NODE_ENV === 'development' ? dev : prod;
Now when I upload to Heroku (app-dev) and it builds it, after that it seems to be using the prod.example.com instead of dev.example.com API endpoint. Since the NODE_ENV is development I thought it would take the SS_API_URL for dev but it is taking the SS_API_URL for prod
You can add this variable on settings menu, "Config Vars", inside your heroku project. So you add NODE_ENV and value "production".
I don't understand this problem, as I am not using the fs module anywhere, I deleted all the node_modules and package.json and package-lock and reinstalled everything and upgraded node, still get the same error
here is my package.json file for the server side.
{
"name": "todoapp",
"version": "1.0.0",
"description": "",
"main": "backend/server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"build": "npm run build --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"concurrently": "^6.2.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.14",
"nodemon": "^2.0.7",
"slugify": "^1.5.3"
}
}
fs is server-side only e.g you can't use it during page rendering.
I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project
{
"version": "1.0.0",
"description": "' open source project",
"main": "index.js",
"dependencies": {
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.6.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-function-bind": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"scripts": {
"serve": "node src/backend/main.js",
"watch": "webpack --mode=development -d --watch",
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { "type": "git", "url": "" },
"keywords": [],
"author": "",
"license": "ISC",
"bugs": { "url": "" },
"homepage": ""
}
If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.
npm i concurrently
npm install -g nodemon
then at the package.json file add concurrently to run both frontend and backend together.
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
If you want to run only your frontend go to client folder and open your terminal and type
npm start or yarn start
I'm a newbie nodejs. I have a trouble about deploying nodejs app to google app engine. This is my error, I have been trying to fix it but it's not work. I've installed babel.
Bug
Updating service [default]...failed.
ERROR: (gcloud.app.deploy) Error Response: [9]
Application startup error:
restaurant_api#1.0.0 prestart /app
npm run -s build
You have mistakenly installed the babel package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the babel package to the babel-cli package.
npm uninstall babel
npm install --save-dev babel-cli
This is my package.json
"main": "dist",
"scripts": {
"dev": "NODE_ENV=development nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "NODE_ENV=production pm2 start dist",
"prestart": "npm run -s build",
"lint": "eslint src",
"test": "echo \"Error: no test specified\" && exit 1",
"babel-version": "babel --version"
},
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1
}
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"body-parser": "^1.17.0",
"express": "^4.15.0",
"express-jwt": "^5.1.0",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.8.5",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^4.0.0",
"pm2": "^2.4.2"
},
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-eslint": "^7.1.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"eslint": "^3.16.1"
}
Problem is quite simple, if you notice clearly GAE, does not install dev-dependencies. So move your dev-deps above inside deps , like I did and babel no found error is gone.
{
"name": "scraping",
"version": "0.3.0",
"description": "Starter project for an ES6 RESTful Express API",
"main": "dist",
"scripts": {
"dev": "nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src"
},
"eslintConfig": {
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
},
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/developit/express-es6-rest-api.git"
},
"author": "Saransh Sharma <jason#developit.ca>",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"morgan": "^1.8.0",
"resource-router-middleware": "^0.6.0",
"#jonstuebe/scraper": "^0.1.4",
"babel-cli": "^6.9.0",
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^3.1.1",
"nodemon": "^1.9.2"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"eslint": "^3.1.1",
"nodemon": "^1.9.2"
},
"bugs": {
"url": "https://github.com/developit/express-es6-rest-api/issues"
},
"homepage": "https://github.com/developit/express-es6-rest-api#readme",
"keywords": [
"scraper",
"product",
"from",
"amazon"
]
}
The clue is in the error message.
In your devDependencies section, you already have babel-cli included.
However, your dependencies section still has a reference to "babel": "^6.23.0".
Either remove this line, or replace it with babel-cli, leaving you with:
"dependencies": {
"babel-cli": "^6.23.0",
"body-parser": "^1.17.0",
"express": "^4.15.0",
"express-jwt": "^5.1.0",
"jsonwebtoken": "^7.3.0",
"mongoose": "^4.8.5",
"passport": "^0.3.2",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^4.0.0",
"pm2": "^2.4.2"
},
You need to install babel-cli globally, i.e. run the command "npm install babel-cli -g" as part of your build npm script, or create a pre-install script that install it if you want to keep it more organized in case you need to add more things later on.
"scripts": {
"dev": "NODE_ENV=development nodemon -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "npm install bable-cli -g && babel src -s -D -d dist --presets es2015,stage-0",