I have created a build of my react app and deploy locally on apache server but it's showing a blank page. Every js, css and json file i am getting status 200 on my network tab of browser. any help is appreciated.Thank you.
This is my project package.json file.
{
"name": "client_side",
"homepage":".",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.7.2",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"create-react-app": "^3.3.0",
"history": "^4.10.1",
"jquery": "^3.4.1",
"jss": "^10.0.0",
"material-table": "^1.54.1",
"material-ui-dropzone": "^2.4.7",
"md5": "^2.2.1",
"md5-hash": "^1.0.1",
"mdbreact": "^4.23.0",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-image": "^2.2.1",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"tubular-react": "^3.0.0-rc6",
"typeface-roboto": "0.0.75",
"typescript": "^3.7.2",
"update": "^0.7.4"
},
"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"
]
}
}
Below is my html looks like:
Related
Here is the package.json from my project, I've ran npm install.
{
"name": "myProject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.0.0",
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.20.2",
"#craco/craco": "^7.0.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"antd": "^4.8.1",
"axios": "^0.19.2",
"babel-preset-react-app": "^9.1.2",
"connected-react-router": "^6.8.0",
"craco-less": "^2.0.0",
"i18next": "^19.7.0",
"react": "^16.14.0",
"react-dom": "^16.13.1",
"react-i18next": "^11.7.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^5.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco 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": {
"babel-loader": "^8.1.0",
"less-loader": "^11.1.0"
}
}
after ran npm start, I've got this error
Compiled with problems:X
ERROR in ./src/index.less (./node_modules/css-loader/dist/cjs.js??> > ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/craco-less/node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[4]!./src/index.less)
Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js):
// ================================================================
.table-size(~'middle', #table-padding-vertical-md, #table-padding-horizontal-md, #table-font-size-md);
^
Operation on an invalid type
Error in /Users/user/audien/node_modules/antd/lib/table/style/size.less (line 53, column 0)
I've tried to lower less-loader to version 5.0.0, but it still doesn't work.
Set math as always in your less options
math: 'always'
In your craco.config.js
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
math: 'always',
modifyVars: { '#primary-color': '#6b75e3' },
javascriptEnabled: true,
},
},
},
},
],
};
Thanks you want to try to help me!
When I build my React web app it looks very different from the development mode. I use serve -s build to watch when the app is build. But also on my online Digitalocean server, it won't look the same as in development. So it probably has something to do with React or how it was build.
This is in development mode:
This is when it is build:
So it looks CSS or Javacript did not compile correctly.
This is my package.json
{
"name": "websitedominique",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.4.2",
"#mui/styled-engine-sc": "^5.4.2",
"#react-hook/mouse-position": "^4.1.3",
"#rehooks/window-size": "^1.0.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"concurrently": "^7.0.0",
"cors": "^2.8.5",
"express": "^4.17.3",
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^6.0.2",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"swiper": "^6.8.4",
"use-react-dimensions": "^2.0.1",
"web-vitals": "^1.0.1"
},
"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"
]
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}
I Hope someone can help me with this. Thanks for all help!
you should add a .env file in your root and add:
REACT_APP_SC_DISABLE_SPEEDY=true
The Styled Components library uses something called the "Speedy mode" to inject styles on production. you can Google it for more info
I have tried looking around to see what might be causing my app to not completely build on DigitalOcean. I have tried a few solutions that I have found here to no avail. I have no problem launching my react app locally.
Here is my package.json
{
"name": "first_tailwind_css",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#headlessui/react": "^1.4.1",
"#hookform/resolvers": "^2.7.1",
"#tailwindcss/forms": "^0.3.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#tippyjs/react": "^4.2.5",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"firebase": "^8.8.1",
"react": "^17.0.2",
"react-cookies": "^0.1.1",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-hook-form": "^7.12.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"semantic-ui-react": "^2.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco 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": {
"#types/react-cookies": "^0.1.0",
"#types/react-router-dom": "^5.1.8",
"#typescript-eslint/eslint-plugin": "^4.29.0",
"#typescript-eslint/parser": "^4.29.0",
"autoprefixer": "^9.8.6",
"eslint": "^7.32.0",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react": "^1.1.7",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"postcss": "^7.0.36",
"prettier": "^2.3.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.7"
}
}
Where DigitalOcean stops building:
[2021-10-22 16:38:33] ℹ 「wds」: webpack output is served from
[2021-10-22 16:38:33] ℹ 「wds」: Content not from webpack is served from /workspace/public
[2021-10-22 16:38:33] ℹ 「wds」: 404s will fallback to /
[2021-10-22 16:38:33] Starting the development server...
[2021-10-22 16:38:33]
My build commands on DigitalOcean:
npm run build
npm start
I have tried running the install command before build, but that did not work either.
I've just taken over a project from a disgruntled developer who thinks he's the best thing since sliced bread.
The error
He swears his code was running on the last commit... although, I get problems in an async/await. I vaguely remember having similar problems when not supporting the right version of babel, but that was years back. The project is created with create-react-app.
Here's the package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"jest": {
"transform": {}
},
"dependencies": {
"#makerdao/multicall": "^0.11.0",
"#material-ui/core": "^4.11.0",
"#material-ui/data-grid": "^4.0.0-alpha.8",
"#material-ui/icons": "^4.9.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bignumber.js": "^9.0.1",
"bip32": "^2.0.6",
"bip38": "^3.1.1",
"bip39": "^3.0.2",
"bitcoinjs-lib": "^5.2.0",
"bs58check": "^2.1.2",
"ci": "^1.0.0",
"fake-indexeddb": "^3.1.2",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.0.0",
"jest-fetch-mock": "^3.0.3",
"json-bigint": "^1.0.0",
"json-bignumber": "^1.0.2",
"keccak256": "^1.0.2",
"node-fetch": "^2.6.1",
"puppeteer": "^5.5.0",
"qrcode-svg": "^1.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"rimraf": "^2.6.3",
"secp256k1": "^4.0.2",
"typescript": "^4.0.5",
"web3": "^1.3.0",
"xmlhttprequest": "^1.8.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --verbose",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:react/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"ansi-regex": "^4.1.0",
"eslint-plugin-react": "^7.21.5",
"gh-pages": "^3.1.0",
"react-scripts": "^3.4.4"
}
}
You are passing a promise to the function, and promise is not a function. You should do instead: await f and not execute it by await f() since the promise just needs to be called and not to be executed.
I am having trouble getting a create-react-app 3.4.1 build running on iOS 10 safari. It runs fine in development (npm run), but after building it, accessing the site throws the following error in the console : SyntaxError: Invalid unicode escape in identifier: '\u2160'. (bitwise or character)
This is triggered on this line in one of the chunk.js bundles created during build:
(this.webpackJsonpappname = this.webpackJsonpappname || []).push([[2], [function(e, t, r) {
My package.json looks like this:
{
"name": "appname",
"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",
"bootstrap": "^4.4.1",
"copyfiles": "^2.2.0",
"del-cli": "^3.0.0",
"jszip": "^3.4.0",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-pdf": "^4.1.0",
"react-redux": "^7.2.0",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-haiku": "^0.1.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"renamer": "^2.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.01%",
"not dead",
"not op_mini all",
"iOS 10"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"iOS 10"
]
}
}
Any ideas how what the issue could be?