I have been facing this issue along with almost all other developers on the team. Some of whom have solved this by miracle on Linux and windows machine but this 100% doesn't work on Mac with version 8.x of node as well as 12.x version
I have an existing React based application and some of the components try to import some components from babel runtime but it always return the error Module Not Found :
You can see in the below screenshot that it exists in the path
My package.json looks like this
{
"name": "ant",
"version": "1.1.6",
"private": true,
"homepage": "",
"dependencies": {
"#babel/runtime": "^7.4.5",
"#sentisis/react-tags-input": "^1.0.4",
"antd": "^3.8.2",
"axios": "^0.18.0",
"chosen-js": "^1.8.7",
"classnames": "^2.2.6",
"echarts": "^4.1.0",
"echarts-for-react": "^2.0.14",
"google-maps-react": "^2.0.2",
"immutability-helper": "^2.7.1",
"inputmask": "^4.0.2",
"jquery": "^3.3.1",
"lightbox2": "^2.10.0",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"npm": "^6.4.1",
"query-string": "^6.2.0",
"rc-queue-anim": "^1.6.5",
"react": "^16.5.2",
"react-animated-css": "^1.0.4",
"react-bootstrap-sweetalert": "^4.4.1",
"react-calendar": "^2.17.3",
"react-chosen": "^0.3.8",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.5.2",
"react-facebook-login": "^4.1.1",
"react-ga": "^2.5.6",
"react-geolocated": "^2.4.0",
"react-google-autocomplete": "^1.0.18",
"react-google-login": "^4.0.1",
"react-js-pagination": "^3.0.2",
"react-loadable": "^5.5.0",
"react-owl-carousel2": "^0.3.0",
"react-paginating": "^1.3.0-hook.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"react-router-redux": "5.0.0-alpha.9",
"react-scripts": "2.0.0-next.3e165448",
"react-scroll-up-button": "^1.6.4",
"react-select": "^2.4.3",
"react-slick": "^0.24.0",
"react-tag-autocomplete": "^5.11.1",
"react-tag-input": "^6.4.0",
"react-tagsinput": "^3.19.0",
"reactstrap": "^6.4.0",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"reqwest": "^2.0.5",
"sendbird": "^3.0.81",
"slick-carousel": "^1.8.1",
"wowjs": "^1.1.3"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject",
"prettier": "prettier --write ./src/**/**/**/*"
},
"browserslist": {
"development": [
"last 2 chrome versions",
"last 2 firefox versions",
"last 2 edge versions"
],
"production": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
},
"devDependencies": {
"babel-plugin-import": "^1.8.0",
"bootstrap": "^4.1.3",
"cdn-loader": "^0.1.8-0",
"history": "^4.7.2",
"html-webpack-cdn-plugin": "^0.2.0",
"html-webpack-plugin": "^3.2.0",
"loaders.css": "^0.1.2",
"node-sass": "^4.9.3",
"prettier": "^1.14.2",
"prop-types": "^15.6.2",
"react-app-rewire-less": "^2.1.2",
"react-app-rewired": "^1.5.2",
"redux-immutable-state-invariant": "^2.1.0"
}
}
Any help or clue will be greatly appreciated.
Related
I have been through all the similar questions on stackoverflow and also viewed several other source, yet I can't solve this issue for some reason.
On my React JS app I get the error messages as shown in the screenshot below. I am using react-app-rewired, but all the solutions with putting a config-override file in my rootfolder don't seem to work. In the other screenshot you can see all the files in the rootfolder.
I guess you will need more information to properly see what I am doing wrong. The config-overrides file is located in the node-modules/react-app-rewired folder.
This is the content of my config-overrides.js
const {paths} = require('./');
// load environment variables from .env files
// before overrides scripts are read
require(paths.scriptVersion + '/config/env');
const override = require(paths.configOverrides);
const webpack = typeof override === 'function'
? override
: override.webpack || ((config, env) => config);
if (override.devserver) {
console.log(
'Warning: `devserver` has been deprecated. Please use `devServer` instead as ' +
'`devserver` will not be used in the next major release.'
)
}
const devServer = override.devServer || override.devserver
|| ((configFunction) =>
(proxy, allowedHost) =>
configFunction(proxy, allowedHost));
const jest = override.jest || ((config) => config);
const pathsOverride = override.paths || ((paths, env) => paths);
// normalized overrides functions
module.exports = {
webpack,
devServer,
jest,
paths: pathsOverride
};
this is the content of my package.json
{
"name": "fuse-react-app",
"version": "8.2.1",
"private": true,
"dependencies": {
"#date-io/date-fns-jalali": "2.15.0",
"#emotion/cache": "11.9.3",
"#emotion/react": "11.9.3",
"#emotion/styled": "11.9.3",
"#fullcalendar/daygrid": "5.11.2",
"#fullcalendar/interaction": "5.11.2",
"#fullcalendar/react": "5.11.2",
"#fullcalendar/timegrid": "5.11.2",
"#googleapis/docs": "^1.0.1",
"#hookform/resolvers": "2.9.7",
"#mui/base": "5.0.0-alpha.93",
"#mui/icons-material": "5.8.4",
"#mui/lab": "5.0.0-alpha.95",
"#mui/material": "5.10.1",
"#mui/styles": "5.9.3",
"#mui/system": "5.10.1",
"#mui/utils": "5.9.3",
"#mui/x-data-grid": "5.15.2",
"#mui/x-date-pickers": "5.0.0-beta.6",
"#react-pdf/renderer": "^3.0.0",
"#reduxjs/toolkit": "1.8.5",
"apexcharts": "3.35.4",
"autosuggest-highlight": "3.3.4",
"axios": "0.27.2",
"axios-mock-adapter": "1.21.2",
"browserify-zlib": "^0.2.0",
"clsx": "1.2.1",
"core-js": "3.24.1",
"crypto-js": "4.1.1",
"date-fns": "2.29.1",
"date-fns-jalali": "2.21.3-1",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "^9.10.0",
"framer-motion": "7.2.0",
"fs": "^0.0.1-security",
"google-map-react": "2.2.0",
"googleapis": "^108.0.0",
"history": "5.3.0",
"i18next": "21.9.1",
"jwt-decode": "3.1.2",
"keycode": "2.2.1",
"lodash": "4.17.21",
"marked": "4.0.18",
"material-ui-popup-state": "2.0.1",
"mobile-detect": "1.4.5",
"mobx": "^6.6.1",
"moment": "2.29.4",
"net": "^1.0.2",
"notistack": "1.0.6-next.3",
"os": "^0.1.2",
"perfect-scrollbar": "1.5.5",
"prismjs": "1.28.0",
"prop-types": "15.8.1",
"qs": "6.11.0",
"raw-loader": "4.0.2",
"react": "18.2.0",
"react-apexcharts": "1.4.0",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "1.15.0",
"react-draggable": "4.4.5",
"react-hook-form": "7.34.2",
"react-i18next": "11.18.4",
"react-imask": "6.4.2",
"react-masonry-css": "1.0.16",
"react-number-format": "4.9.3",
"react-pdf": "^5.7.2",
"react-popper": "2.3.0",
"react-redux": "8.0.2",
"react-router-dom": "6.3.0",
"react-spring": "8.0.27",
"react-swipeable": "7.0.0",
"react-swipeable-views": "0.14.0",
"react-swipeable-views-utils": "0.14.0",
"react-table": "7.8.0",
"react-transition-group": "4.4.5",
"react-virtualized": "9.22.3",
"react-window": "1.8.7",
"redoc": "2.0.0-rc.76",
"redux-logger": "4.0.0",
"stream": "^0.0.2",
"styled-components": "5.3.5",
"stylis": "4.1.1",
"stylis-plugin-rtl": "2.1.1",
"tls": "^0.0.1",
"tools": "^0.0.0",
"web-vitals": "2.1.4",
"yup": "0.32.11",
"zlib": "^1.0.5"
},
"peerDependencies": {
"autoprefixer": "10.4.7",
"postcss": "8.4.13",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"resolutions": {
"react": "18.2.0",
"react-dom": "18.2.0",
"babel-loader": "8.1.0"
},
"devDependencies": {
"#babel/core": "7.17.10",
"#babel/eslint-parser": "7.17.0",
"#babel/node": "7.17.10",
"#babel/preset-env": "7.17.10",
"#babel/preset-react": "7.16.7",
"#tailwindcss/aspect-ratio": "^0.4.0",
"#tailwindcss/line-clamp": "^0.4.0",
"#tailwindcss/typography": "^0.5.4",
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"assert": "^2.0.0",
"autoprefixer": "9.8.8",
"buffer": "^6.0.3",
"cross-env": "7.0.3",
"crypto-browserify": "^3.12.0",
"eslint": "7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unused-imports": "^1.1.5",
"https-browserify": "^1.0.0",
"immutable": "4.0.0",
"js-beautify": "1.14.0",
"os-browserify": "^0.3.0",
"postcss": "8.4.5",
"prettier": "^2.4.1",
"process": "^0.11.10",
"promise": "8.1.0",
"react-app-alias": "2.2.0",
"react-app-rewired": "^2.2.1",
"react-scripts": "5.0.1",
"source-map-explorer": "2.5.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"tailwindcss": "3.1.8",
"typescript": "4.6.4",
"url": "^0.11.0",
"util": "^0.12.5"
},
"scripts": {
"start": "react-app-rewired start",
"build": "cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
"test": "react-app-rewired test --env=node",
"eject": "react-app-rewired eject",
"build-docs": "babel-node --presets #babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "react-app-rewired build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"lint": "eslint"
},
"engines": {
"node": ">=14.0.0",
"npm": ">=7.0.0"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}
}
The error message is telling you what you need to do. You must add the config override AND also manually install the missing package. Post the contents of your override file and package.json.
When I start the run debug of my app in Visual Studio Code(F5) then the mouse is not working. I can not anymore left click with the mouse but I can move the mouse pointer but no click is registered. I can press the keyboard "tab" and press ENTER but that's it. I can't see where to start debug this problem so I add my package.json maybe it can give some clue
In Windows I use the Chrome Browser and other apps and the mouse is behaving normally there.
What I did prior to this strange happening was that I tried the "react-scripts": "5xx". And then I Went back to "react-scripts": "4.0.3"
Here's my package.json
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"#types/recompose": "^0.30.9",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"notistack": "^3.0.0-alpha.1",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-virtualized": "^9.22.3",
"react-virtualized-auto-sizer": "^1.0.6",
"react-visibility-sensor": "^5.1.1",
"react-window": "^1.8.6",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.1.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^4.6.2",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "ยง",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "4.0.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
I've had this issue with react-script myself, and it seems to be a well-known issue.
As suggested in this github issue, you can do the following:
Change the react-script version to 4.0.3 in package.json
Add "resolutions": { "react-error-overlay": "6.0.11" } (latest version of react-error-overlay) to your package.json
npm install react-error-overlay
Delete your node_modules and package-lock.json
Run npm i
Hope that fixes it.
I have one project, it used in multiple subdirectories, so i want to create a single build that work in multiple subdirectories like,
https://www.myhost.com/subdir-1,
https://www.myhost.com/subdir-2, and
https://www.myhost.com/subdir-3, but when i can create build it used only static/js path & it didn't work properly.
I tried with "homepage": "." in package.json, but it didn't work. I don't know why?
It has proper path like, https://www.myhost.com/subdir-1/static, https://www.myhost.com/subdir-2/static & https://www.myhost.com/subdir-3/static, but some chunks & fonts are not loaded proper, it gives error.
I also tried with .env file, adding PUBLIC URL. But in this after creating build i have to made changes in build, means i am changing subdirectory name in all files & it's not good way i think.
So, anyone please help me on this, how i can achieve this?
My Package.json
{
"name": "wieldy-hook",
"version": "0.1.0",
"private": true,
"dependencies": {
"#amcharts/amcharts3-react": "^3.1.0",
"#ant-design/icons": "^4.6.2",
"#azure/msal-browser": "^2.18.0",
"#azure/msal-react": "^1.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"amcharts3": "^3.21.15",
"antd": "^3.26.20",
"antd-theme-webpack-plugin": "^1.3.0",
"anychart-react": "^1.4.1",
"axios": "^0.21.1",
"better-xlsx": "^0.7.6",
"connected-react-router": "^6.6.1",
"file-saver": "^2.0.5",
"firebase": "^7.6.1",
"instantsearch.css": "^7.3.1",
"konva": "^7.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"less-vars-to-js": "^1.3.0",
"lodash": "^4.17.21",
"moment": "^2.24.0",
"multiselect-react-dropdown": "^1.5.0",
"nprogress": "^0.2.0",
"nxt-html-to-text": "^7.1.3",
"passport": "^0.4.1",
"passport-saml": "^3.1.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-big-calendar": "^0.19.2",
"react-bootstrap-sweetalert": "^5.1.9",
"react-ckeditor-component": "^1.1.0",
"react-color": "^2.17.3",
"react-custom-scrollbars": "^4.2.1",
"react-day-picker": "^7.4.8",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-doc-viewer": "^0.1.5",
"react-dom": "^16.12.0",
"react-draft-wysiwyg": "^1.14.7",
"react-flip-move": "^3.0.4",
"react-google-login": "^5.2.2",
"react-google-maps": "^9.4.5",
"react-hot-loader": "^4.12.18",
"react-icons": "^3.10.0",
"react-instantsearch": "^6.1.0",
"react-instantsearch-dom": "^6.1.0",
"react-intl": "^3.9.3",
"react-konva": "^16.13.0-6",
"react-notifications": "^1.4.3",
"react-pdf-to-image": "^1.0.2",
"react-phone-input-2": "^2.13.7",
"react-phone-number-input": "^3.0.23",
"react-placeholder": "^3.0.2",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^3.4.0",
"react-signature-canvas": "^1.0.3",
"react-simple-maps": "^0.12.1",
"react-slick": "^0.25.2",
"react-sortable-hoc": "^1.10.1",
"react-star-rating-component": "^1.4.1",
"react-stickies": "^0.0.16",
"recharts": "^2.0.0-beta.1",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"rheostat": "^4.1.0",
"slick-carousel": "^1.8.1",
"url-search-params": "^1.1.0",
"victory": "^34.0.0",
"worker-loader": "^2.0.0"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired --env=jsdom",
"less": "lessc --js src/styles/wieldy.less public/css/style.css"
},
"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"
]
},
"devDependencies": {
"babel-plugin-import": "^1.13.0",
"cross-env": "^7.0.3",
"customize-cra": "^0.9.1",
"react-app-rewired": "^2.1.5"
}
}
My .env file
PUBLIC_URL=/subdir-1
I can't do "npm install" on this project anymore and I don't know why because I'm a novice.
I see in the picture top that something about "node-sass" maybe is the problem. Should I update node-sass? I must ask so I don't cause more trouble
package.json
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"normalize-wheel": "^1.0.1",
"notistack": "^1.0.10",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^16.8.4",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.1",
"react-resize-detector": "^5.0.7",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
node-sass 4.x doesn't support Node 16 https://github.com/sass/node-sass#node-version-support-policy (I believe this might also be the case for CRA)
I'm trying to debug my react app built by create-react-app on mobile.
So I started app using react-script start,
and made sure all devices have same ip and port. But then the error came out when I tried to access react dev server on smartphone, and all I could see was just blank page.
I never use react-script options like HTTPS=true, but it seems like trying to request using HTTPS. Why?
This is a screenshot from android phone.
and this is my package.json.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.1.0",
"#emotion/styled": "^10.0.17",
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/react-fontawesome": "0.0.20",
"#juggle/resize-observer": "^3.2.0",
"#material-ui/core": "^1.5.1",
"#material-ui/icons": "^3.0.2",
"#material-ui/styles": "^4.4.1",
"#n8tb1t/use-scroll-position": "^1.0.43",
"#react-hook/media-query": "^1.1.1",
"antd": "^4.2.5",
"auth0-js": "^9.8.1",
"axios": "^0.18.1",
"core-js": "^3.6.5",
"d3-ease": "^1.0.6",
"emotion": "^9.2.12",
"env-cmd": "^10.1.0",
"fast-deep-equal": "^2.0.1",
"formik": "^1.5.8",
"formik-effect": "^1.2.0",
"i18next": "^17.0.14",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",
"immutable": "^4.0.0-rc.12",
"jquery": "^3.5.1",
"js-cookie": "^2.2.0",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.15",
"mapbox-gl": "^1.10.1",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"randomstring": "^1.1.5",
"react": "^16.10.2",
"react-app-polyfill": "^1.0.2",
"react-awesome-modal": "^2.0.5",
"react-circular-progressbar": "^2.0.3",
"react-countup": "^4.2.2",
"react-currency-input": "^1.3.6",
"react-dom": "^16.10.2",
"react-dropdown-tree-select": "^2.1.0",
"react-dropzone": "^4.2.12",
"react-emotion": "^9.2.12",
"react-flags-select": "^1.1.10",
"react-ga": "^2.7.0",
"react-google-login": "^5.0.4",
"react-google-maps": "^9.4.5",
"react-highcharts": "^16.0.2",
"react-i18next": "^10.12.3",
"react-iamport": "0.0.2",
"react-icons": "^3.7.0",
"react-images": "^0.5.17",
"react-map-gl": "^5.2.5",
"react-materialize": "^3.3.1",
"react-moment": "^0.7.7",
"react-move": "^6.4.0",
"react-paginate": "^6.3.0",
"react-password-strength": "^2.4.0",
"react-quill": "^1.3.3",
"react-redux": "^7.1.0-rc.1",
"react-responsive-carousel": "^3.1.50",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^1.2.2",
"react-scripts": "^3.4.1",
"react-share": "^3.0.0",
"react-slick": "^0.23.2",
"react-sortable-hoc": "^1.11.0",
"react-sticky": "^6.0.3",
"react-tooltip": "^3.11.1",
"react-transition-group": "^4.3.0",
"react-treebeard": "^3.2.4",
"react-typed": "^1.1.2",
"react-use-measure": "^2.0.1",
"redux": "^4.0.0",
"redux-actions": "^2.6.5",
"redux-promise": "^0.6.0",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.13.7",
"slick-carousel": "^1.8.1",
"socket.io-client": "^2.2.0",
"styled-components": "^4.3.2",
"universal-cookie": "^3.1.0",
"uuid": "^3.3.2",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build:dev": "env-cmd -f ./.env.dev react-scripts build",
"build:prod": "env-cmd -f ./.env.prod 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"
]
},
"devDependencies": {
"http-proxy-middleware": "^0.19.1",
"react-test-renderer": "^16.9.0",
"typescript": "^3.9.6"
}
}