I'm trying to use json-server in a project directory that I already set up with React via: npx create-react-app new-app. In the new-app
directory, I have a file db.json with some content:
{
"notes": [
{
"id": 1,
"content": "first content",
},
{
"id": 2,
"content": "content 2",
}
]
}
I also have the json-server installed with npm install json-server --save-dev. Then, I ran the server on port 3001 via: npx json-server --port 3001 --watch db.json and everything so far runs smoothly and I can see the notes file on http://localhost:3001/notes.
At this point, to packages.json, under "scripts", I added a server configuration as such:
{
"name": "new-app",
"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.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server -p3001 --watch db.json" // ADDED THIS
},
"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"
]
},
"devDependencies": {
"json-server": "^0.16.1"
}
}
According to the reference that I was following, this was supposed to show all the stuff from react on http://localhost:3001, but what I get is just a blank page with the title React App (no icon either). My root directory is as follows (no changes other than ones mentioned):
https://imgur.com/a/MR0NYrr
Could anyone point out what went wrong here? Or alternatively, how they managed to get react and json-server set up correctly?
When set up this way, it doesn't seem like the index.js file (and other .js files) in the src folder is being used by the index.html in the public folder.
Am I right that you want to see the website, not the content of the json-server? Maybe try http://localhost:3000.
Related
I want to host a react.js server side rendering because of ffmpeg killing me with SharedArrayBuffer is not defined
I've tried so many hosting service provider like firebase but now I want to host it to Vercel but I don't know how to make it works with react ssr. Can anyone help me?
When I run 'ssr' command in my machine it's work and ffmpeg is not throwing 'bad memory' or 'SharedArrayBuffer is not defined' but when I run it in vercel build command it stucks but the index.js/server.js is running I know because the main script is running and won't stop so the build is stuck but any solution? I've search the problem but I guess nobody haven't asked this yet
and this a code of package.json
{
"name": "ultimatesheep-vidreverse",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#babel/register": "^7.18.9",
"#ffmpeg/core": "^0.11.0",
"#ffmpeg/ffmpeg": "^0.11.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0",
"cors": "^2.8.5",
"ignore-styles": "^5.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"ssr": "npm run build && node backend/index.js",
"deploy": "npm run build && firebase deploy",
"git" : "git add . && git commit -m 'ahawdaw' && git push -u origin main"
},
"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"
]
},
"externals": {
"react": "React"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "backend/index.js",
"keywords": [],
"author": "",
"license": "ISC"
}
if you're having the same problem as me in the past, try checking out next.js and I fixed all the problem I had!
I restarted working on my website and it keeps giving this error I'm not sure why because I never edited the package.json file. Btw I'm doing my project with react.
error that shows up whenever I do npm start or use codesandbox to run my code
this is my package.json file
{
"name": "profile-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"font-awesome": "^4.7.0",
"react": "^18.0.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.0.0",
"react-icons": "^4.3.1",
"react-router-dom": "6",
"react-scripts": "5.0.1",
"sass": "^1.51.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"
]
}
}
I don't know much about your project, but that is the typical error given when something is expecting JSON and is given HTML instead.
This commonly occurs when an API request is made incorrectly and an index.html is returned, the API is running PHP and it errors and gives an error message in HTML, etc.
If it worked before but doesn't now, then something must have changed.
Browsers almost never break backwards compatibility, so it's most likely something in your project.
Did you make absolutely no changes whatsoever since you last worked with it? (Not even a dependency update.)
Go through these steps, and let us know what happens:
Are you sure you have not changed anything since it worked?
Are there any error messages in the browser console?
Does your project have any other components? If so, what are the contents of the components mentioned in that error message?
Based on this, do you have a base tag in the head of your index.html or equivalent? E.g. <base href="/" />
Also maybe relevant: Webpack Issue #2541.
I just deployed an app through Heroku and ran into the following error listed below. I am using create-react-app. This app runs fine in the development server. I only had issues once I tried to deploy.
I made sure to have sass installed and not node-sass because I learned node-sass has been deprecated.
I already read through multiple pages on StackOverFlow, including this one
Cannot find module 'sass'
However, after reading through all these answers I was unable to discover a solution.
Failed to compile
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Cannot find module 'sass'
Require stack:
- /app/node_modules/sass-loader/dist/utils.js
- /app/node_modules/sass-loader/dist/index.js
- /app/node_modules/sass-loader/dist/cjs.js
- /app/node_modules/loader-runner/lib/loadLoader.js
- /app/node_modules/loader-runner/lib/LoaderRunner.js
- /app/node_modules/webpack/lib/NormalModule.js
- /app/node_modules/webpack/lib/NormalModuleFactory.js
- /app/node_modules/webpack/lib/Compiler.js
- /app/node_modules/webpack/lib/webpack.js
- /app/node_modules/react-scripts/scripts/start.js
This error occurred during the build time and cannot be dismissed.
Package.json
{
"name": "create-react-app",
"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",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"nodemailer": "^6.6.3",
"nodemailer-mailgun-transport": "^2.1.3",
"nodemon": "^2.0.12",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-recaptcha": "^2.1.0",
"react-router-dom": "^6.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",
"watch": "nodemon server.js"
},
"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.45.0"
}
}
If requested and people think more code is needed, I can post it.
"devDependencies": {
"sass": "^1.45.0"
^^Should have been under dependencies,
devDependencies launches with the development server but not with the build.
I believe it is because your sass module is under dev dependicies. Try to change that. Unfortunately i can't comment because my ranking isn't high enough but that should fix it
whenever i try to make print it out on a browser i always get the error on the header
"Uncaught SyntaxError: Cannot use import statement outside a module"
before asking this question i tried all solutions similar to this problem including adding "type":"module", to my json package but none seems to work,i also added the "pack" and still no print out all my scripts are properly configured i use ecma6script and the latest version of react as well,
here is my hmtl code below
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="indexx.js"></script>
</body>
</html>```
and here is my reactcode
```import React from "react";
import ReactDom from "react-dom";
ReactDom.render(<h1>hello world</h1>, document.getElementById("root"));```
below is my json package
```{
"name": "asa-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/react": "^11.1.1",
"#testing-library/user-event": "^12.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"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"
]
}
}```
You are trying to launch not compiled sources directly from a browser. To launch a workable app you can do:
npm start - DEV server launched on localhost:3000
npm run build - PROD build, compiles the sources into the build/ folder. There you'll find compiled JS, CSS and index.html to launch.
I'm trying to use Jest to aid Puppeteer testing in WebStorm.
It is my first time using Jest and it looks just the framework I need to help with testing, assertions, setup and teardown etc...
Trouble is, WebStorm won't recognise the keywords e.g. beforeAll, describe, afterAll. Here's a snippet:
My package.json file looks like this:
{
"name": "ui-tests",
"version": "1.0.0",
"description": "End-to-end UI tests",
"author": "John Doe",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"debug": "NODE_ENV=debug npm test",
"eject": "react-scripts eject"
},
"jest": {
"testURL": "http://localhost"
},
"devDependencies": {
"faker": "^4.1.0",
"jest-cli": "^22.0.4",
"jest": "^22.0.4",
"puppeteer": "^1.9.0"
}
}
I have the following plugins installed:
Any ideas?
Thanks
I installed "jest" library as it described here:
In Preferences | Languages & Frameworks | JavaScript | Libraries,
press Download..., select 'jest' from the list of available stubs,
press Download and Install
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000357324-Get-rid-of-Unresolved-function-method-variable-warning-in-Jest-test-files
That helped me with most definitions. Though I still have the same issue with "jest-puppeteer".