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
Related
I want to deploy website on Heroku which created using MERN. I created it with parcel. When I deploy on Heroku, It shows following error and I can't deploy it on heroku.
How can I fix this issue?
Error Image
Package.json
{
"name": "TestProject",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "parcel public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#material-ui/core": "^4.11.3",
"axios": "^0.21.1",
"dropzone": "^5.9.2",
"parcel": "^2.0.0-beta.2",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#parcel/transformer-image": "^2.0.0-beta.2",
"react-dropzone": "^11.3.2"
}
}
Heroku would look for a build command for production in there.
"scripts": {
"build": "npm run build",
"install": "npm install",
"start": "....",
},
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 am having trouble getting content to come through in my app.js file when I try to host on Netlify (npm run build)
Here is what my package.json file looks like:
{
"name": "nasa-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"dotenv": "^8.1.0",
"jquery": "^1.9.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-scripts": "0.9.5"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"description": "**A Day In The Life On Mars**",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/able-leopard/a-day-in-the-life-on-mars.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "https://github.com/able-leopard/a-day-in-the-life-on-mars#readme"
}
It seems like I can't post screenshots because I am still new here but basically all the hosted version shows is
<div id="root"><div/> while the local version actually displays all the contents in my app.js
Thanks so much in advance!
In your package.json you need to change your homepage to "/"..
This resolved your issue: https://vigilant-bhabha-b3e068.netlify.com/ (This link no longer works, this was only to demonstrate that I got it working for OP - not trying to hijack their deployment)
Let me know once you see this and I will remove the Netlify app I created and the repo I forked..
In order to demonstrate that this is working:
URL:
SITE:
{
...
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
},
"homepage": "/"
}
I can't seem to get Babel to work with Parcel, although the presets are being installed automatically. It works locally and in Chrome, but it's not transpiling node_modules es6 files, so the output still has const/let/... and it cannot run in Safari.
.babelrc
{
"presets": ["#babel/preset-env","#babel/preset-react"]
}
(I've also tried the env and react ones).
package.json scripts
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html",
Why would this be?
Full package.json (note this is after messing around in order to try to get it working)
{
"name": "my-react-app",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.1.5",
"#babel/preset-env": "^7.1.5",
"#babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"browserslist": "^4.3.4",
"lodash": "^4.17.11",
"node-sass": "^4.10.0",
"pinyin": "^2.8.3",
"prop-types": "^15.6.2",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-notifications": "^1.4.3",
"react-router-dom": "^4.3.1"
},
"devDependencies": {
"cssnano": "^4.1.7",
"sass": "^1.14.3"
}
}
Still getting .js files with const, let. Any ideas what I am missing?
I've found a solution to it from https://github.com/parcel-bundler/parcel/issues/1655#issuecomment-425593377
// .browserslistrc.packages
node 10.11
// package.json
{
"scripts": {
"postinstall": "npm-run-all -p \"postinstall:*\"",
"postinstall:p-retry": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/p-retry",
"postinstall:query-string": "cpy --rename=.browserslistrc .browserslistrc.packages node_modules/query-string"
}
}
Add a postinstall:package-name for every npm package that you need to add transpilation (in my case, pinyin) and run npm run postinstall after every npm install. Babel should now also transpile that npm package!
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