I recently got into Web Development with NodeJS. I created a simple react app and wanted to deploy it on GitHub pages. I watched a couple of tutorials and in all of them they would add the "homepage" property in their package.json file.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"homepage": "https://github.com/owner/project#readme",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"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"
]
}
}
So I wanted to know what is this "homepage" property?
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json.
This will let Create React App correctly infer the root path to use in the generated HTML file.
for more info
https://create-react-app.dev/docs/deployment/
Related
I am starting the json-server from the project with command "npm run server" and saw this problem. Currentlt, it is a React project.
Terminal error picture
I have done some research, some suggest to downgrade node.js version and other to create "npm-shrinkwrap.json" in the project. So, what is the main problem of this and how to fix it permanently?
Package.json file:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server -p3001 --watch db.json"
},
"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": {
"json-server": "^0.4.2"
}
}
npm and node.js version:
Version
You can try to re-install node.js. The verisions cause of the this error.
this is my package.json with the proxy that i'm using,
I've tried to use cors inside index.js in backend but it didn't work, I've also tried to to make .env file and write my proxy inside it, but it didn't work.
this process it working on my admin folder
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:8800/api",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"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"
]
},
"devDependencies": {
"sass": "^1.49.8"
}
}
const {MongoClient} = require("mongodb")
function App() {
return (
<div>
Example Text
</div>
);
}
export default App;
Im using Mongodb to extract data from my DB and display it in react. However, inmmediately after I import {MongoClient} I recieve "ReferenceError: SharedArrayBuffer is not defined" error. I've seen some stuff about something called cross origin, but i lack the understanding in how to do that. Any help? Thanks.
My package.json is the following:
{
"name": "cart_iew",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"mongodb": "^4.1.0",
"mongoose": "^5.13.5",
"node": "^16.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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 am new to creating the npm package.
I have created my first react npm package using the following blog - https://www.codementor.io/#peterodekwo/create-a-simple-react-npm-package-in-simple-steps-using-cra-w966okagi
and it was published successfully and work fine in react as expected.
So what's the problem.
When I install my npm package and implement it. I have to use the following code to import.
import Card from 'owaiz-test/dist/Card';
import Button from 'owaiz-test/dist/Button';
https://prnt.sc/1cpkvsy
The problem with the dist folder. I don't want to use the dist folder to be written.
I want something like
import Card from 'owaiz-test/Card';
import Button from 'owaiz-test/Button';
I know it's compiling the code from my package.json file mentioned below.
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
But, How can I make changes in the code above or any other solution?
Update:
ADD Package.json
{
"name": "owaiz-test",
"version": "0.1.1",
"private": false,
"babel": {
"presets": [
"#babel/preset-react"
]
},
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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",
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
},
"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": {
"#babel/cli": "^7.5.5",
"#babel/preset-react": "^7.0.0"
}
}
Update 2
{
"name": "owaiz-test",
"version": "0.1.1",
"private": false,
"main": "dist/index.cjs.js",
"browser": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"babel": {
"presets": [
"#babel/preset-react"
]
},
"peerDependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"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",
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/index.js -d dist --copy-files"
},
"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": {
"#babel/cli": "^7.5.5",
"#babel/preset-react": "^7.0.0"
}
}
You need to edit package.json
Create index.js file as a main entry for your package
import Card from './components/Card'
import Button from './components/Button'
export { Card, Button }
Use index.js during bundling:
"publish:npm": "...babel ./src/index.js ..."
Set main and browser fields(module for esm packages can skip, types for TypeScript definitions):
"main": "dist/index.cjs.js",
"browser": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
Docs
Also need to add react and react-dom to peerDependencies not to dependencies, so it will not be bundled with your code What is the correct way of adding a dependency to react in your package.json for a react component
UPD
Article from question is total crap, those are better:
https://blog.logrocket.com/the-complete-guide-to-publishing-a-react-package-to-npm/
https://dev.to/jimjunior/how-to-create-an-npm-library-from-react-components-2m2
But still can be some caveats.
I'm starting my first node/react project and I try to write my first tests using Jest.
When I run them using yarn test, it fails with the following message :
Cannot find module 'react' from 'Form.js'
However, Jest was able to find:
'./App.css'
'./App.js'
'./App.test.js'
You might want to include a file extension in your import, or update your
'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts',
'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
I created my project using create-react-app and here is my package.json :
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"shards-react": "^1.0.3"
},
"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:5000"
}
I don't understand what the Form.js file is, as I didn't create such a File. I guess there is something wrong with my dependencies in package.json but I can't find an explanation for now.