Develop Reference

Getting the Unexpected token < in JSON at position 31 on vscode and online IDE

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.

Cannot find module 'sass' - Heroku Deploy

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

React app not working on Safari: Invalid Regular Expression

My React app works in Chrome and Edge, but renders a blank screen in Safari with the error:
Invalid regular expression: invalid group specifier name
I thought it was an issue with dependencies, and tried to use brute force create a fresh app and install dependencies one by one to pinpoint the issue, but that did not work.
Here are the dependencies:
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.1.2",
"#testing-library/user-event": "^12.2.2",
"bootstrap": "^4.5.3",
"emailjs-com": "^2.6.4",
"firebase": "^8.2.7",
"firebase-admin": "^9.5.0",
"formik": "^2.2.6",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-file-viewer": "^1.2.1",
"react-loading-skeleton": "^2.1.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"react-to-print": "^2.12.2",
"react-transition-group": "^4.4.1",
"redocx": "^1.1.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^2.0.1",
"styled-components": "^5.2.1",
"use-before-unload": "^1.0.1",
"uuid": "^8.3.1",
"web-vitals": "^0.2.4",
"yup": "^0.32.8"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production 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": {
"node-sass": "^4.14.1",
"sass-loader": "^10.1.0"
}
I also tried searching for regular expressions in my code, specifically lookaheads and lookbehinds '(?' but did not find any.
Any ideas?

I found the solution by click on syntax error coming in the console, Check the file error is coming probably from vendor-min.js > There you will find an error and the library name as culprit I found image-to-base64 library is what not working for me. I commented out and checked and it worked
This Was Error I found after clicking
2.14a00c79.chunk.js:2 SyntaxError: Invalid regular expression: unrecognized character after (?(anonymous function) #
2.14a00c79.chunk.js:2 wb.swiper-init.js:1 SyntaxError: Unexpected token '<'(anonymous function) # wb.swiper-init.js:1
Please feel free to communicate Happy to solve your errors

I got the same error in production build of create-react-app project. It was difficult to locate the error, as the code is bundled and minified. My approach was to get the development build running on safari. I can then easily locate the regex. It turns out, I shipped an unsupported regex pattern of safari.

unable to use json-server and react together

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.

"Cannot GET /" error when deploying Nuxt Vue.js application to Google App Engine

I get a "500 Server Error" when I deploy my Nuxt application.
Below are my configuration files:
package.json
{
"name": "my-app-name",
"version": "1.0.0",
"description": "An App",
"author": "Me",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "NODE_ENV=production nuxt",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Previously my start was nuxt start and i do not have deploy
https://github.com/kamatte-me/nuxt-gae-se/blob/master/package.json
But still get the same error.
app.yaml
runtime: nodejs8
env : standard
I also referred and attempted to try out the suggestions here and here but doesn't work. Note that my application does not have a server.js or app.js, so i cannot use those.
Update
I did a workaround using the below approach (so can ignore everything above unless you need it as additional reference).
I added a server.js (exactly same as theirs) following https://github.com/kamatte-me/nuxt-gae-se and updated my package.json to such:
{
"name": "my-app-name",
"version": "1.0.0",
"description": "A App",
"author": "Me",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "NODE_ENV=production node server.js",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"express": "^4.16.3", //<-added this as suggested by kamette
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Now my error is this:
Any idea?
I have this in my Navigation.vue:
<nuxt-link to="/" exact>Dashboard</nuxt-link>
In addition, the error logs I saw:
After adding "nuxt-sass-resources-loader": "^2.0.3" to the dependencies as advised by kamatte, I am seeing back the "500 Server Error" again, logs doesn't show anything useful (I have clicked "Load newer logs" many times already, this is the latest...)

Express.js and nuxt-sass-resources-loader must be included in package.json.
.e.g.)
package.json
"dependencies": {
"express": "^4.16.3",
"nuxt-sass-resources-loader": "^2.0.3"
},
Otherwise, Express.js will not be installed on the GAE.
It seems that it worked because you already installed Express.js in your local environment.