Develop Reference

How to host a react.js ssr on vercel?

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!

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.

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.

REACT-APP Uncaught SyntaxError: Cannot use import statement outside a module

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.

"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.