I started using React.js yesterday and wanted to make my little app public (I know that's usually a bad Idea).However, I have the problem that whenever I want to build the static HTML files with "npm run build", I only get the default index.html, without any React.js components.
As I said, I've only been with React since yesterday, which is probably why I'm making some very stupid mistake :D
Heres my package.json:
{
"name": "playground",
"version": "0.1.0",
"private": true,
"homepage": "I placed the URL and port here",
"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"
},
"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"
]
}
}
Ok, I created a new React-APP and copyed my code. Now its working, although I have no clue on why its Working xD
Related
I am a little bit perplexed here as I attempt to launch my first react project online.
I'm using AWS Amplify, I have connected my github repo, and have everything linked together, from VS Code I can push to my github, which then after a minute or so displays the changes inside of my AWS Amplify website, so I believe I have the vscode - GH - amplify pipeline operating properly...
I initialized a base react app, on the AWS site and it works as expected,
The dev server on localhost displays the same spinning logo and
Edit src/App.js and save to reload
I then added some extra random text as a test, within the app.js,
It added my hello world test text in the localhost. I push it to GH, it then appears exactly the same on my Amplify site as it does on dev server. the same react initial page but now both have the test text. I then delete all the components of the app.js
add a simple header nav bar, update package.json to include a couple dependencies (chakra-ui) and then the whole thing breaks.
I'm sorry if this is a dumb question but do I need to do anything outside of vs code, in order to have the package.json updates not ruin the compiling?
In VS Code i need to npm install packages do I need to do this somewhere inside AWS Amplify?
here is the json that works fine
{
"name": "react-amplify-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"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"
]
}
}
I then try to add the JSON file from my full react project where i made a decently involved (for me anyway) website.
Here is the updated JSON that makes it not work anymore
{
"homepage": "https://avarga1.github.io/My-Portfolio/",
"name": "myreactportfolio11",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/core": "^0.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"iframe-resizer": "^4.2.11",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-s3": "^1.3.1",
"react-scripts": "^5.0.1",
"scripts": "^0.1.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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": {
"gh-pages": "^4.0.0"
}
}
What am I missing???
Thanks in advance.
This is my first react app and I am trying to deploy it. When i use npm run build command, it produces all the folders in /build except index.html.
As a result, browser only renders file path on my localhost port.
P.S: I tried my best to find the solution to this issue, ut I couldn't and there is one very close which is related to VUEjs not reactjs
I do use create-react-app
Package.json file
{
"name": "react-task-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-scripts": "5.0.1",
"serve": "^14.1.1",
"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"
],
"homepage": "."
}
}
Having some trouble debugging my react app. This app was created using create-react-app, so I should be able to run 'npm start' and see the app run in the localhost window in my browser, but instead I see nothing, and in the Elements tab of chrome devtools shows a tag saying "You need to enable javascript to run this app".
Not sure what is going on here. I had this app running perfectly fine yesterday, and I didn't change anything to the package.json.
Here's what my package.json looks like:
`
`{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"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"
]
}
}`
`
Can anybody help me with this? I tried adding a common solution, to add "proxy": "localhost:5000", but that didn't solve the problem.
I was expecting the app to successfully start in the browser.
I am trying to render static HTML inside an Azure function from React-components with the help of: ReactDOMServer.renderToStaticMarkup(<HelloWorldPage />)
where <HelloWorldPage /> is a React-component.
However, I receive SyntaxError: Unexpected identifier errors both on imports and use of React components inside my Azure function although i have imported react and react-dom.
My package.json looks like:
{
"name": "experimental",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"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 certain the solution to this is fairly simple, which makes it extra frustrating. But I do not know where to start. I would be infinitely grateful if someone could point me in the right direction. Thanks!
I have been trying to install React on my pc using both the methods npx and npm but even then my terminal (VSCode) is throwing this error. I am unable to start my custom react app.
I have checked other responses but I was not satisfied.
My current node version is 12.16.2
My current npm version is 6.14.8
My package.json file is :
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.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"
]
}
}
I have been stuck for hours now. Any help is very much appreciated.