"Module not found" when deploying React app to Heroku - reactjs

When I try to deploy my React app (made with create-react-app) to Heroku (using create-react-app-buildpack) I get the following error:
Failed to compile.
Module not found: Error: Can't resolve 'jquery' in
'/tmp/build_049d73accaf035b451adf36ac44318d3/src/components'
npm ERR! Linux 3.13.0-128-generic
npm ERR! argv
"/tmp/build_049d73accaf035b451adf36ac44318d3/.heroku/node/bin/node"
"/tmp/build_049d73accaf035b451adf36ac44318d3/.heroku/node/bin/npm" "run"
"build"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! life-quality-data#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
When testing on my computer everything works. I also have jQuery added as a dependency in package.json:
{
"name": "life-quality-data",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"dns": "^0.2.2",
"fetch": "^1.1.0",
"jquery": "^3.2.1",
"node-sass-chokidar": "0.0.3",
"numeral": "^2.0.6",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.12",
"xml2js": "^0.4.19"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I think I might be missing a line. Also, could it be the .gitignore? Because on GitHub the node modules are being ignored.

Related

when i try to run the project with library #google/model-viewer by npm start i get this error

this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#google/model-viewer": "^1.11.0",
"react": "^18.0.0"
}
}
`PS C:\Users\AA\Desktop\3Dpro\my-app> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AA\AppData\Local\npm-cache_logs\2022-04-05T20_22_54_567Z-debug-0.log
PS C:\Users\AA\Desktop\3Dpro\my-app>
I am using a library for 3D ( #google/model-viewer)
this is my code:
import '#google/model-viewer'
import React, { Component } from 'react'
export default class PersonalDesign extends Component {
render() {
return (
)
}
}
Looks like your package.json file is missing the scripts for some reason. Add them back in. You also appear to be missing the react-dom and react-scripts dependencies.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#google/model-viewer": "^1.11.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
After updating/saving your package.json file, run npm i to install the dependencies and then run npm start to start your project.

How to solve npm error "npm ERR! code ELIFECYCLE"?

No error when I entered npm run dev to edit the code, but can not build/export it.
Here is the ERROR that shown on the Terminal when I entered npm run build
> #landing/015-next#0.0.1 postbuild C:\Users\Han\Desktop\andamilo\agency-alpha-next
> next-sitemap
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! #landing/015-next#0.0.1 postbuild: `next-sitemap`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the #landing/015-next#0.0.1 postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Han\AppData\Roaming\npm-cache\_logs\2021-09-30T03_47_34_736Z-debug.log
package.json
{
"name": "#landing/015-next",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"serve": "next start",
"export": "next export",
"postbuild": "next-sitemap"
},
"dependencies": {
"framer-motion": "^2.9.5",
"next": "^10.0.3",
"next-compose-plugins": "^2.2.1",
"next-optimized-images": "^2.6.2",
"polished": "^4.0.5",
"rc-drawer": "^4.1.0",
"rc-tabs": "^11.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-ga": "^3.3.0",
"react-icons": "^4.1.0",
"react-responsive": "^8.2.0",
"react-scroll": "^1.8.1",
"react-stickynode": "^3.0.4",
"swiper": "^6.3.5",
"theme-ui": "^0.3.4"
},
"devDependencies": {
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"next-sitemap": "^1.1.6"
}
}
I have deleted cache and re-install npm, but it is not working.
Is there alternative way to resolve this error?
best regards,

Could start my react application using npm start

I have created the react application using npx create-react-app task-tracker and this is my package.json file when ever I run npm start it shows error. As I am new to React I hardly have any knowledge about it.
this the error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ASUS\AppData\Roaming\npm-cache\_logs\2021-04-19T15_13_05_651Z-debug.log
package.json:
{
"name": "task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"cra-template": "1.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3"
}
}
It seems like create-react-app did not add the "scripts" field to the package.json object. I would try adding this field to package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
If that doesn't work, try running create-react-app again

npm error when adding the latest work to the gh-pages deploy

I had to create a docs in order to see my react page displaying on github pages. I used h-pages deploy and keep getting this error when I am attempting to update the gh-pages.
The only branch I can access is *master.
I was doing :
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
this is the error :
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rReduxTable#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the rReduxTable#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/marianaperez/.npm/_logs/2018-03-12T19_02_15_196Z-debug.log
this is my json package
{
"name": "rReduxTable",
"version": "0.1.0",
"private": true,
"devDependencies": {
"gh-pages": "^1.1.0",
"husky": "^0.14.3",
"lint-staged": "^7.0.0",
"prettier": "^1.11.0",
"react-scripts": "^1.0.17"
},
"dependencies": {
"debug": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "next",
"react-sortable-table": "^1.3.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"sanitize.css": "^5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"precommit": "lint-staged",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"homepage": "https://marianapt.github.io/reduxTable/",
"lint-staged": {
"*.{js,json,css,md}": [
"prettier --write",
"git add"
]
}
}

Reactjs PEERINVALID eslint-plugin-jsx-a11y

I am trying to run example code for React Stock chart
https://github.com/rrag/react-stockcharts
The examples are in
https://github.com/rrag/react-stockcharts-examples2
I am new to npm and js and I want to run some examples to learn.
I got correct npm version and node js version but still I got some problem.
npm ERR! peerinvalid The package eslint-plugin-jsx-a11y#5.0.1 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer eslint-config-react-app#1.0.5 wants eslint-plugin-jsx-a11y#^5.0.3
I looked at package-lock.json and changed eslint-plugin-jsx-a11y#5.0.1 to 5.0.3 and still no luck.
Also, this is how package.json looks like.
{
"name": "react-stockcharts-example",
"description": "",
"version": "0.0.24",
"dependencies": {
"d3-dsv": "1.0.5",
"d3-format": "^1.2.0",
"d3-scale": "1.0.6",
"d3-time-format": "2.0.5",
"prop-types": "15.5.10",
"react": "15.5.3",
"react-dom": "15.5.3",
"react-stockcharts": "0.7.0-beta.12"
},
"devDependencies": {
"react-scripts": "1.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Thank you for your help.

Resources