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
Related
When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired 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"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};
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?
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: