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.

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

Make ES6 Internet Explorer 11 compliant using Grunt-Babel

I installed grunt-babel in order to allow IE 11 users on our site. Right now the site is broken for those users. I've been mostly successful except I've gotten the following error that I don't know how to address.
ReferenceError: regeneratorRuntime is not defined
It looks like polyfills are deprecated so I'm wondering what is the best solution.
EDIT
Following justDan and David's advice, I installed regenerator/runtime package and am now getting an error require is not defined
This code will be run through the browser. My company is using a custom CMS which requires us to compress the theme file and there are large sections requiring dynamically populated text which is part of the reason for using ES6 template literals.
package.json file
{
"name": "Some Site",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"regenerator-runtime": "^0.13.3"
},
"devDependencies": {
"#babel/core": "^7.7.2",
"#babel/preset-env": "^7.7.1",
"#babel/preset-es2015": "^7.0.0-beta.53",
"babel-preset-es2015-nostrict": "^6.6.2",
"grunt": "^1.0.4",
"grunt-autoprefixer": "^3.0.4",
"grunt-babel": "^8.0.0",
"grunt-contrib-compress": "^1.5.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-imagemin": "^3.1.0",
"grunt-contrib-less": "^2.0.0",
"grunt-contrib-uglify": "^4.0.1",
"grunt-contrib-watch": "^1.1.0",
"grunt-purifycss": "^0.1.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
.babelrc file
{
"presets": ["#babel/preset-env"]
}

You need to install and run this package
https://www.npmjs.com/package/regenerator-runtime

Getting Vue to work with IE11 via Browserify and Babel 6

I'm having trouble getting a Vue site to work consistently in IE11. I'm currently trying to use browserify to transpile with Babel to ES5, but seemingly it isn't working consistently (it sometimes works, but then after making a non-change to a JS file (such as adding a space to the end of a line) and then recompiling it will suddenly not work).
I'm seeing errors such as:
SCRIPT1006: Expected ')' in _typed_array.js
SCRIPT1002: Syntax error in _collection.js
So I believe this means the JS isn't being transpiled correctly into ES5?
Here's a copy of my package.json that contains all my build scripts:
{
"private": true,
"scripts": {
"watch-js": "watchify -vd -p browserify-hmr -e rest-theme/src/main.js -o rest-theme/dist/build.js",
"watch-scss": "./node_modules/.bin/node-sass -w --output-style=compressed scss/style.scss rest-theme/dist/build.css",
"dev": "npm run watch-scss | npm run watch-js",
"build": "cross-env NODE_ENV=production browserify rest-theme/src/main.js | uglifyjs -c warnings=false -m > rest-theme/dist/build.js"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"babel-runtime": "^6.9.2",
"mixitup": "^3.2.1",
"vue": "^2.1.1",
"vue-moment": "^2.0.1",
"vue-resource": "^1.0.0",
"vue-router": "^2.1.0",
"vue-smooth-scroll": "^1.0.13",
"viewport-units-buggyfill": "^0.6.0",
"vivus": "^0.4.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^5.8.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"browserify-hmr": "^0.3.5",
"cross-env": "^1.0.6",
"node-sass": "^3.0.0",
"uglify-js": "^2.5.0",
"vue-hot-reload-api": "^2.0.6",
"vueify": "^9.3.0",
"vueify-insert-css": "^1.0.0",
"vue-migration-helper": "^1.1.1",
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
"vueify",
["babelify", { "presets": ["es2015"] }]
]
},
"browser": {
"vue": "./node_modules/vue/dist/vue.common"
}
}
Nothing is really jumping out at me as to why it isn't compiling correctly; but perhaps there is something incorrect in my syntax, or an old version of something that is causing the build to fail sometimes?
I'm also including the babel polyfill on the first line of my main JS file:
import "babel-polyfill";
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
.....
But perhaps that is implemented incorrectly?
Let me know if I can provide more info, or additional script pieces to help illuminate anything!