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.
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,
};
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
After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables exported from SCSS never appear in JavaScript.
Here's what I'm doing:
_variables.scss:
$akt-dark-teal: #035164;
$akt-light-blue: #007FAA;
:export {
primaryMain: $akt-dark-teal;
secondaryMain: $akt-light-blue;
}
In React:
import scss from './scss/parts/_variables.scss';
console.log(scss); // [object Object]
console.log(scss.primaryMain); // undefined
console.log(scss.secondaryMain); // undefined
This used to work before the package upgrade. The path to the imported SCSS file is correct, I verified it. Besides similar exports fail the same way with other files, no matter where they are or what is their name.
I think the problem lies somewhere in the packages:
The current package.json:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^2.10.8",
"#material-ui/core": "^4.11.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/pickers": "^3.3.10",
"#reduxjs/toolkit": "^1.5.1",
"#stripe/react-stripe-js": "^1.4.0",
"#stripe/stripe-js": "^1.13.2",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^13.1.5",
"#types/react-redux": "^7.1.16",
"axios": "^0.21.1",
"chart.js": "^3.1.1",
"cryptr": "^6.0.2",
"css-loader": "^5.2.4",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^7.24.0",
"firebase": "^8.4.1",
"history": "^5.0.0",
"html-react-parser": "^1.2.6",
"http": "0.0.1-security",
"https": "^1.0.0",
"immer": "^9.0.1",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.16",
"lodash": "^4.17.21",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.22",
"node-sass": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-chartjs-2": "^3.0.2",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.32.11"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1"
}
}
The old package.json before the package upgrade:
{
"name": "js-dashboard",
"version": "0.0.1",
"private": true,
"homepage": "/public/",
"dependencies": {
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.54",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.5.0",
"#stripe/react-stripe-js": "^1.1.2",
"#stripe/stripe-js": "^1.11.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-redux": "^7.1.11",
"axios": "^0.21.1",
"chart.js": "^2.9.4",
"cryptr": "^6.0.2",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^6.6.0",
"firebase": "^7.23.0",
"history": "^5.0.0",
"html-react-parser": "^0.14.2",
"immer": "^7.0.15",
"json-loader": "^0.5.7",
"libphonenumber-js": "^1.9.4",
"lodash": "^4.17.20",
"material-ui-phone-number": "^2.2.6",
"moment": "^2.29.1",
"nanoid": "^3.1.18",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
"react-chartjs-2": "^2.11.1",
"react-csv": "^2.0.3",
"react-dom": "^16.13.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"react-to-pdf": "0.0.13",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
},
"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Update: fixed on CRA v5.0.0
This is a bug that appeared with the version 4 of create-react-app. Here is the issue about it on Github. It has been fixed since then and the fix should be available in the next release.
In the meantime, if you use something to override the webpack config of CRA you can fix it yourself by setting the compileType of css-loader to 'icss' as explained in this answer.
This is a very strange issue but I was using react-table 7.0.0.rc16 and I recently upgraded to react-table 7.0.1 the problem is my data works in dev mode but as soon I create a react build it wont render anything I would like to know why and I am attaching my package.json for the same.
sandbox
Demo
Package.json
{
"name": "test",
"homepage": "http://www.test.com",
"version": "0.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^1.3.11",
"#material-ui/core": "^4.4.2",
"#material-ui/icons": "^4.4.3",
"#material-ui/lab": "^4.0.0-alpha.39",
"#material-ui/pickers": "^3.2.6",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"date-fns": "^2.9.0",
"echarts": "4.2.1",
"echarts-for-react": "^2.0.15-beta.0",
"formik": "^1.5.8",
"formik-material-ui": "^0.0.22",
"google-map-react": "^1.1.5",
"i18next": "^17.0.18",
"i18next-browser-languagedetector": "^4.0.0",
"i18next-xhr-backend": "^3.2.0",
"immutable": "^4.0.0-rc.12",
"node-sass": "^4.12.0",
"prop-types": "^15.6.1",
"react": "^16.9.0",
"react-csv": "^2.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-d3-tree": "^1.16.1",
"react-dom": "^16.9.0",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.13.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^2.0.3",
"react-table": "7.0.1",
"redux": "^4.0.4",
"redux-saga": "^1.1.3",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"watch": "react-scripts start --watch",
"build": "CI=false react-scripts --expose-gc --max-old-space-size=4096 build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"eslint-config-prettier": "^6.4.0",
"eslint-plugin-prettier": "^3.1.1",
"prettier": "^1.18.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Package-lock.json is also attached as a file
image of table
I am using node v10.23.1 and npm 6.14.10.
This is a problem with react-table v7.0.1, upgrading to v7.0.2 fixes the problem.
It's a minification bug. Here is the exact commit that fixed the problem.
From the Changelog :
7.0.2
Fixed an issue where the internal flexRenderer would not work correctly in production due to the strangest friggin' minification bug
I've ever encountered. 🤷♂️
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.