I'm having a problem deploying my MERN app to heroku, the process faild to react scripts, I've deployed 2 apps before using the same config and postbuild script, also, there is an app that I deployed before with no problem, tried to deploy it again to a new app on heroku just to test things and it fails.
I'm on windows 10 64x by the way, node 10.15.1, npm 6.4.1
{
"name": "recipury",
"version": "1.0.0",
"description": "app to add food recipes",
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix
client && npm run build --prefix client"
},
"author": "abed taki",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"concurrently": "^4.1.0",
"express": "^4.16.4",
"jsonwebtoken": "^8.4.0",
"mongoose": "^5.4.4",
"multer": "^1.4.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^10.10.0"
},
"devDependencies": {
"nodemon": "^1.18.9"
},
"engines": {
"node": "10.15.1",
"npm": "6.4.1"
}
}
if you are using error handling in server.js then try to move the app.use(express.static(path.join(__dirname, 'client/buil'))); before calling error
Related
this is my package.json file it's a code from a course to test my code functionality.
enter image description here
The npm run build is working by the way & I'm using vite to run the npm.
{
"name": "adopt-me",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"vite",
"build":"vite build",
"preview":"vite preview",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo\"Error: no test specified\"&& exit1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#vitejs/plugin-react": "^2.1.0",
"eslint": "^8.24.0",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"vite": "^3.1.4"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
to run my react on browser in, I expecting to get a localhost number to do that
According to your screenshot:
You need to run npm run dev not npm run div
I'm trying to deploy my nextjs app to git hub page. but the production is very slow. and everytime it publishes shows only the read.md. the way I deployed is below.
installed the gh-pages into devDependencies.
added replacer.js with following code..
const replace = require("replace-in-file");
const options = {
//you may need to modify the file address to suite your project
files: "./build/index.html",
from: [/src="\//g, /href="\//g],
to: ['src="./', 'href="./'],
};
(async function () {
try {
const results = await replace(options);
console.log("Replacement results:", results);
} catch (error) {
console.error("Error occurred:", error);
}
})();
updated next.config.js is below
module.exports = {
Images: {
domains: ["/public", "fakestoreapi.com"],
env: {
PUBLIC_URL: "https://imangi.github.io/amazon-clone",
assetPrefix: "./",
},
},
};
updated package.json file is as below.
{
"name": "amazon-clone",
"version": "1.0.0",
"homepage": "https://imangi.github.io/amazon-clone",
"description": "amazon clone with react & next.js",
"main": "index.js",
"scripts": {
"replaceFilePaths": "node replacer.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build && next export -o build && npm run replaceFilePaths",
"deploy": "gh-pages -d build",
"predeploy": "npm run build",
"export": "next export -o build && npm run replaceFilePaths",
"start": "next start"
},
"author": "Imangi Nanayakkara",
"license": "ISC",
"dependencies": {
"#heroicons/react": "^1.0.6",
"#reduxjs/toolkit": "^1.8.2",
"#tailwindcss/line-clamp": "^0.4.0",
"firebase": "^9.8.2",
"firebase-admin": "^10.2.0",
"next": "^12.1.6",
"next-sitemap": "^3.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-responsive-carousel": "^3.2.23"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"gh-pages": "^4.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2"
}
}
Executed the following command:
npm run deploy
pushing _next folder with .nojekyll file to gh-pages branch.
when i try to start my project in react, i am getting this error , i am using Ubuntu system
Found bindings for the following environments: - Linux 64-bit with Node.js 9.x
I am using node -v : 10.13.0 and npm -v : 6.11.2, here i have also attached my package.json file, can anyone please help me how to resolve this issue ?
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"classnames": "^2.2.6",
"gatsby": "^2.24.48",
"gatsby-background-image": "^1.1.2",
"gatsby-plugin-routes": "^1.0.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.28",
"gatsby-source-filesystem": "^2.3.25",
"gatsby-transformer-sharp": "^2.5.13",
"node-sass": "^4.14.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"prettier": "2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
You just need to use:
npm rebuild node-sass
I would suggest adding a .nvmrc file in the root of your project to avoid this error happen. This is a simple file that fixes the Node version for your project in order to avoid a mismatch between versions and forcing the project to run under a specific version. You just need to add a .nvmrc file with this content:
v10.13.0
Try removing your node_modules and reinstalling. You might also want to check that you don't have something link NVM or and old Node 9 version in your path, that node-sass is picking up while intalling
I am running a react app that uses express as a backend. I followed this tutorial on how to connect the two then deploy to heroku. In short I am running express on port 5000 as instructions tell me to, and on client side in the package json proxy to port 5000. from server side I run a npm tool called concurrently that runs both in tandem.
Now the problem is the npm run build only seems to be half working. the page loads for a split second on port 5000 (before run build I would use port 3000) disappears leaving only my custom background colors. no errors i can see either for server side or react app side.
I tried changing the server's port numbers first thinking this was the issue as serve -s build runs the app on port 5000 which likely conflicted but the same issue remains.
Please let me know what code If any I can show to help diagnose this as Im afraid I do not know what to present other than my file layout (see the tutorial's link I have the same overall layout) and bellow will be my package jsons for client and server respectively.
Client package.json:
"name": "friftr_version_2_0",
"version": "2.0.0",
"description": "Friftr, but its in react",
"main": "index.js",
"author": "V1llage_ID10T",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.9.8",
"#material-ui/icons": "^4.9.1",
"axios": "^0.19.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lazy-load-image-component": "^1.4.1",
"react-router-dom": "^5.1.2",
"react-router-page-transition": "^3.1.0",
"react-scripts": "^3.4.1",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Server package.json
{
"name": "friftr2",
"version": "2.0.0",
"description": "friftr redesign in express, react, material-ui, mongoose database. ",
"main": "server.js",
"repository": {
"type": "git",
"url": "git+https://github.com/n/a.git"
},
"author": "V1LLAGE_ID10T",
"license": "ISC",
"bugs": {
"url": "https://github.com/n/a/issues"
},
"homepage": "https://github.com/n/a#readme",
"dependencies": {
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cheerio": "^1.0.0-rc.3",
"concurrently": "^5.1.0",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"got": "^10.6.0",
"hsts": "^2.2.0",
"http-proxy-middleware": "^1.0.1",
"mongo-sanitize": "^1.1.0",
"mongoose": "^5.9.3",
"mongoose-findorcreate": "^3.0.0",
"node-fetch": "^2.6.0",
"nodemon": "^2.0.2",
"passport": "^0.4.1",
"passport-google-oauth20": "^2.0.0",
"passport-local-mongoose": "^6.0.1",
"tall": "^3.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
}
}
so the consensus from my discord buddies has told me NEVER do what I just did and instead uninstall concurrently and have all my fetch requests connect to the address and port rather than root onward.
so my fetch requests on react would go from /api/query/n/n/new/all/0 to http://localhost:5000/api/query/n/n/new/all/0 or whatever port i work on.
I have a react web application, that uses webpack.
Due to the issue with Left-pad I am including my node_modules folder in source control.
I have mocha and enzyme set up to unit test my react modules and my packages.json has the following test configuration.
"test": "mocha-webpack --webpack-config webpack.config-test.js \"source/**/*.test.js\""
It all works great. when I run
npm run test
on my local development machine. All my test's get executed.
The problem I have is when I run "npm run test" as part of a build process on a dedicated build machine I get the following error
Error: Cannot find module 'enzyme'
After some digging around, I discovered that if I ran
npm install enzyme
on the build machine before I ran the test, then it worked fine.
The reason this worked is that the install modified my node_modules/enzyme/packages.json file. There are 2 full paths stored in this file that had the paths to my local dev environment in them, and they got changed to the full path to where my project was run on the build machine.
One under _Args and one under _where
{
"_args": [
[
{
"raw": "enzyme#^2.6.0",
"scope": null,
"escapedName": "enzyme",
"name": "enzyme",
"rawSpec": "^2.6.0",
"spec": ">=2.6.0 <3.0.0",
"type": "range"
},
"C:\\Dev\\UnifiedWeb"
]
],
"_from": "enzyme#>=2.6.0 <3.0.0",
"_id": "enzyme#2.6.0",
"_inCache": true,
"_location": "/enzyme",
"_nodeVersion": "7.0.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/enzyme-2.6.0.tgz_1478746866117_0.454174768878147"
},
"_npmUser": {
"name": "ljharb",
"email": "ljharb#gmail.com"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "enzyme#^2.6.0",
"scope": null,
"escapedName": "enzyme",
"name": "enzyme",
"rawSpec": "^2.6.0",
"spec": ">=2.6.0 <3.0.0",
"type": "range"
},
"_requiredBy": [
"#DEV:/",
"#USER"
],
"_resolved": "https://registry.npmjs.org/enzyme/-/enzyme-2.6.0.tgz",
"_shasum": "148d742b25e2565f7e80870a0c92aea9be1b90ea",
"_shrinkwrap": null,
"_spec": "enzyme#^2.6.0",
"_where": "C:\\Dev\\UnifiedWeb",
"author": {
"name": "Leland Richardson",
"email": "leland.richardson#airbnb.com"
},
"bugs": {
"url": "https://github.com/airbnb/enzyme/issues"
},
"dependencies": {
"cheerio": "^0.22.0",
"function.prototype.name": "^1.0.0",
"in-publish": "^2.0.0",
"is-subset": "^0.1.1",
"lodash": "^4.16.4",
"object-is": "^1.0.1",
"object.assign": "^4.0.4",
"object.entries": "^1.0.3",
"object.values": "^1.0.3",
"uuid": "^2.0.3"
},
"description": "JavaScript Testing utilities for React",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-preset-airbnb": "^2.1.1",
"babel-register": "^6.18.0",
"chai": "^3.5.0",
"coveralls": "^2.11.14",
"enzyme-example-jest": "^0.1.0",
"enzyme-example-karma": "^0.1.1",
"enzyme-example-karma-webpack": "^0.1.4",
"enzyme-example-mocha": "^0.1.0",
"enzyme-example-react-native": "^0.1.0",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.6.0",
"gitbook-cli": "^1.0.1",
"istanbul": "^1.0.0-alpha.2",
"jsdom": "^6.1.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-chrome-launcher": "^1.0.1",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.1.2",
"rimraf": "^2.5.4",
"safe-publish-latest": "^1.1.1",
"sinon": "^1.17.6",
"webpack": "^1.13.3"
},
"directories": {},
"dist": {
"shasum": "148d742b25e2565f7e80870a0c92aea9be1b90ea",
"tarball": "https://registry.npmjs.org/enzyme/-/enzyme-2.6.0.tgz"
},
"gitHead": "5c37d91715a88d393f3c260447a189a446d76e0c",
"homepage": "https://github.com/airbnb/enzyme#readme",
"keywords": [
"javascript",
"shallow rendering",
"shallowRender",
"test",
"reactjs",
"react",
"flux",
"testing",
"test utils",
"assertion helpers",
"tdd",
"mocha"
],
"license": "MIT",
"main": "build",
"maintainers": [
{
"name": "airbnb",
"email": "jordan.harband+npm#airbnb.com"
},
{
"name": "intelligibabble",
"email": "leland.m.richardson#gmail.com"
},
{
"name": "ljharb",
"email": "ljharb#gmail.com"
}
],
"name": "enzyme",
"optionalDependencies": {},
"peerDependencies": {
"react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/enzyme.git"
},
"scripts": {
"build": "babel src --out-dir build",
"check": "npm run lint && npm run test:all",
"clean": "rimraf build",
"docs:build": "npm run docs:prepare && gitbook build",
"docs:clean": "rimraf _book",
"docs:prepare": "gitbook install",
"docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git fetch git#github.com:airbnb/enzyme.git gh-pages && git checkout -b gh-pages && git add . && git commit -am 'update book' && git push git#github.com:airbnb/enzyme.git gh-pages --force",
"docs:watch": "npm run docs:prepare && gitbook serve",
"lint": "eslint --ext js,jsx src test",
"postversion": "git push && git push --tags && npm run clean && npm run docs:publish",
"prepublish": "not-in-publish || (npm run clean && npm run build && safe-publish-latest)",
"pretest": "npm run lint",
"preversion": "npm run clean && npm run check",
"react:13": "npm run react:clean && npm i react#0.13",
"react:14": "npm run react:clean && npm i react#0.14 react-dom#0.14 react-addons-test-utils#0.14",
"react:15": "npm run react:clean && npm i react#15 react-dom#15 react-addons-test-utils#15",
"react:clean": "rimraf node_modules/react node_modules/react-dom node_modules/react-addons-test-utils",
"test": "npm run clean && npm run build && npm run test:only",
"test:all": "npm run react:13 && npm run test:only && npm run react:14 && npm run test:only && npm run react:15 && npm run test:only",
"test:env": "sh ./example-test.sh",
"test:karma": "karma start",
"test:only": "mocha --recursive test",
"test:single": "mocha --watch",
"test:watch": "mocha --recursive --watch test",
"travis": "babel-node ./node_modules/.bin/istanbul cover --report html _mocha -- test --recursive",
"version": "npm run build"
},
"version": "2.6.0"
}
This problem will also affect other developers in my team, as the paths will need to be changed to their local development if they want to run the tests locally.
Why is the full path in the enzyme package? Is there a better way of handling this? Am I missing something, or is npm not portable?
Have you tried npm link ext/* --prefix=node_modules
As per this thread - Local dependency in package.json