react-native expo publish showing a white screen - reactjs

I have a very strange behaviour with a react native app building with Expo Kit. Things can run local, but just show a white screen when I publish or build apk/ipa. Here is pcakage.json
{
"name": "ezymo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"express": "^4.16.2",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-connect": "^5.0.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1",
"jest-cli": "^21.2.1",
"jest-expo": "^22.0.0",
"object-assign": "^4.1.1",
"react-native-scripts": "1.7.0",
"react-test-renderer": "16.0.0-beta.5",
"run-sequence": "^2.2.0",
"socket.io": "^2.0.3"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"axios": "^0.16.2",
"dateformat": "^3.0.2",
"events": "^1.1.1",
"expo": "^22.0.2",
"lodash.times": "^4.3.2",
"prop-types": "^15.6.0",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-camera": "^0.10.0",
"react-native-datepicker": "^1.6.0",
"react-native-modal": "^4.1.0",
"react-native-ratings": "^4.1.0",
"react-native-vector-icons": "^4.4.2",
"react-navigation": "^1.0.0-beta.22",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-saga": "^0.15.6",
"redux-thunk": "^2.2.0",
"uuid": "^3.1.0",
"when": "^3.7.8"
}
}
It's very strange that didn't happen for my other projects. Anyone encounter before and any suggestions?

Related

Component cannot be used as JSX Component. Its Instance type is not a valid JSX element

Yesterday, in a separate folder, I initialized CRA + installed Material UI. Unfortunately (I think) this made me sprinkle the rest of the projects in separate folders.
I think I've searched all over the internet. I used "resolutions", nothing helps.... Of course, I cloned the repository, removed node modules, installed again and so on.
package.json file:
"name": "app",
"version": "3.1.4",
"private": true,
"typings": "./src/types.d.ts",
"engines": {
"node": "16.16.0"
},
"dependencies": {
"#ant-design/icons": "4.3.0",
"#craco/craco": "6.4.5",
"#dnd-kit/core": "4.0.0",
"#dnd-kit/sortable": "5.0.0",
"#honeybadger-io/js": "^4.7.1",
"#honeybadger-io/react": "^4.7.1",
"#react-pdf/renderer": "2.0.21",
"#stripe/react-stripe-js": "1.1.2",
"#stripe/stripe-js": "1.11.0",
"#types/big.js": "^6.1.3",
"#types/slug": "^5.0.3",
"antd": "4.10.2",
"antd-country-phone-input": "3.4.3",
"apexcharts": "3.23.1",
"axios": "0.21.2",
"big.js": "^6.1.1",
"craco-alias": "2.1.1",
"craco-less": "1.17.0",
"dompurify": "2.2.6",
"dotenv-cra": "3.0.1",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"event-source-polyfill": "1.0.24",
"file-saver": "2.0.5",
"formik": "2.2.9",
"framer-motion": "4.1.3",
"handlebars": "4.7.7",
"history": "4.10.0",
"html2canvas": "^1.3.2",
"jest": "26.6.0",
"js-levenshtein": "^1.1.6",
"jsonwebtoken": "8.5.1",
"linkifyjs": "2.1.9",
"luxon": "1.26.0",
"polished": "4.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"query-string": "6.13.7",
"react": "^17.0.2",
"react-apexcharts": "1.3.7",
"react-cookie": "^4.1.1",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.6",
"react-grid-layout": "^1.3.4",
"react-intl": "5.10.1",
"react-lines-ellipsis": "^0.15.3",
"react-portal": "^4.2.1",
"react-query": "^3.39.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"slug": "^5.2.0",
"smart-timeout": "2.5.2",
"source-map-explorer": "^2.5.3",
"styled-components": "5.2.1",
"talkjs": "0.14.5",
"ts-jest": "26.4.4",
"typescript": "^4.6.4",
"use-react-screenshot": "^1.0.2",
"uuid": "^8.3.2",
"web-vitals": "0.2.4",
"webpack": "4.44.2",
"yup": "^0.32.9"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick"
}
},
"scripts": {
"start": "npm i",
"dev": "craco start",
"build": "craco --max_old_space_size=5120 build",
"eject": "craco eject",
"lint": "eslint --ext .ts \"src/**/*\"",
"format": "prettier --write \"src/**/*\"",
"test": "REACT_APP_ENV=test jest --config ./jest.config.js --env=jest-environment-jsdom",
"test:watch": "REACT_APP_ENV=test jest --config ./jest.config.js --watch --env=jest-environment-jsdom",
"test:ci": "REACT_APP_ENV=test jest --config ./jest.config.js --ci --changedSince=origin/master --forceExit --env=jest-environment-jsdom --coverage",
"version": "conventional-changelog -p emojis -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
"release": "release-it",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
"defaults",
">0.2%",
"not dead"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.3",
"#babel/plugin-proposal-private-property-in-object": "^7.18.6",
"#testing-library/jest-dom": "5.11.6",
"#testing-library/react": "11.1.2",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "12.2.2",
"#types/axios": "0.14.0",
"#types/dompurify": "2.2.1",
"#types/draft-js": "0.11.5",
"#types/draftjs-to-html": "0.8.0",
"#types/file-saver": "2.0.3",
"#types/handlebars": "4.1.0",
"#types/history": "4.7.6",
"#types/jest": "26.0.15",
"#types/js-levenshtein": "^1.1.1",
"#types/jsonwebtoken": "8.5.0",
"#types/linkifyjs": "2.1.3",
"#types/lodash.isequal": "4.5.5",
"#types/lodash.uniqueid": "4.0.6",
"#types/luxon": "1.26.0",
"#types/node": "12.0.0",
"#types/query-string": "6.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.11",
"#types/react-draft-wysiwyg": "1.13.1",
"#types/react-grid-layout": "^1.3.2",
"#types/react-helmet": "6.1.0",
"#types/react-intl": "3.0.0",
"#types/react-lines-ellipsis": "^0.15.1",
"#types/react-portal": "^4.0.4",
"#types/react-router-dom": "5.1.7",
"#types/react-slick": "^0.23.10",
"#types/styled-components": "5.1.7",
"#types/uuid": "^8.3.1",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "4.7.0",
"babel-loader": "8.1.0",
"conventional-changelog-cli": "2.1.1",
"conventional-changelog-core": "4.2.1",
"conventional-changelog-emojis": "3.1.0",
"core-js": "^3.22.8",
"eslint": "7.32.0",
"eslint-config-airbnb-typescript": "12.0.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.3.0",
"husky": "4.3.5",
"jest-localstorage-mock": "2.4.3",
"jest-styled-components": "^7.0.8",
"jest-transform-stub": "2.0.0",
"prettier": "2.1.2",
"prettier-plugin-organize-imports": "^3.0.0",
"pretty-quick": "3.1.0",
"process": "0.11.10",
"react-is": "17.0.1",
"react-test-renderer": "^17.0.2",
"release-it": "14.11.5",
"svg-jest": "1.0.1"
},
"resolutions": {
"react-error-overlay": "6.0.9",
"world_countries_lists": "2.3.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
}
}

how to fix this error when build next build

error occur when doing build next build, I have installed the module that was not found, but the error still appears
./node_modules/mdx-bundler/dist/client.js
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /vercel/path0/node_modules/preact (see exports field in /vercel/path0/node_modules/preact/package.json)
this my package
{
"name": "x",
"version": "1.2.0",
"private": true,
"scripts": {
"develop": "vercel",
"start": "node ./scripts/next-remote-watch.js ./data",
"dev": "next dev",
"build": "next build && node ./scripts/generate-sitemap",
"serve": "next start",
"analyze": "cross-env ANALYZE=true next build",
"lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
"prepare": "husky install"
},
"dependencies": {
"#mailchimp/mailchimp_marketing": "^3.0.65",
"esbuild": "^0.12.15",
"github-slugger": "^1.4.0",
"gray-matter": "^4.0.2",
"image-size": "1.0.0",
"isomorphic-unfetch": "^3.1.0",
"mdx-bundler": "^8.0.1",
"motion": "^10.4.0",
"next": "12.0.2",
"next-themes": "^0.0.14",
"preact": "^10.6.6",
"querystring": "^0.2.1",
"react": "^17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"reading-time": "1.3.0",
"rehype-autolink-headings": "^6.0.0",
"rehype-katex": "^6.0.0",
"rehype-prism-plus": "^1.1.0",
"rehype-slug": "^5.0.0",
"remark-footnotes": "^4.0.0",
"remark-gfm": "^2.0.0",
"remark-math": "^5.0.0",
"sharp": "^0.28.3",
"swr": "^1.1.2",
"unist-util-visit": "^4.0.0"
},
"devDependencies": {
"#next/bundle-analyzer": "12.0.2",
"#svgr/webpack": "^5.5.0",
"#tailwindcss/aspect-ratio": "^0.4.0",
"#tailwindcss/forms": "^0.4.0",
"#tailwindcss/line-clamp": "^0.3.0",
"#tailwindcss/typography": "^0.5.0",
"#types/react": "^17.0.14",
"#types/tailwindcss": "^2.2.0",
"#typescript-eslint/eslint-plugin": "^4.28.1",
"#typescript-eslint/parser": "^4.28.1",
"autoprefixer": "^10.4.0",
"cross-env": "^7.0.3",
"dedent": "^0.7.0",
"eslint": "^7.29.0",
"eslint-config-next": "12.0.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"file-loader": "^6.0.0",
"globby": "11.0.3",
"husky": "^6.0.0",
"inquirer": "^8.1.1",
"lint-staged": "^11.0.0",
"next-remote-watch": "^1.0.0",
"postcss": "^8.4.5",
"prettier": "2.2.1",
"socket.io": "^4.1.3",
"socket.io-client": "^4.1.3",
"tailwindcss": "^3.0.7",
"typescript": "^4.3.5",
"vercel": "^24.0.0"
},
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
"prettier --write"
]
}
}

Why is react native bundling multiple times?

I use a custom dev client for ios and expo.
Everytime I use the simulator and reload my ios app bundles multiple times and I can't figure out why.
Also this leads to unexpected crashes when using remote debugging.
This is my package.json
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject",
"lint": "eslint .",
"test": "jest --watch",
"test-coverage": "jest --coverage",
"testChanged": "jest --watch --coverage=false --changedSince=origin/master",
"testDebug": "jest -o --watch --coverage=false",
"testFinal": "jest",
"updateSnapshots": "jest -u --coverage=false"
},
"dependencies": {
"#react-native-community/netinfo": "6.0.2",
"#react-native-firebase/analytics": "^13.0.0",
"#react-native-firebase/app": "^13.0.1",
"#react-native-firebase/auth": "^13.1.0",
"#react-native-firebase/crashlytics": "^13.0.0",
"#react-native-firebase/database": "^13.1.0",
"#react-native-firebase/firestore": "^13.1.0",
"#react-native-firebase/storage": "^13.0.0",
"#react-navigation/bottom-tabs": "^5.11.10",
"#react-navigation/core": "^6.1.0",
"#react-navigation/drawer": "^5.12.5",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.4",
"agora-rn-uikit": "^3.3.0",
"axios": "^0.24.0",
"eas-cli": "^0.43.0",
"expo": "^43.0.0",
"expo-app-loading": "~1.2.1",
"expo-apple-authentication": "~4.0.3",
"expo-dev-client": "^0.6.3",
"expo-facebook": "~12.0.3",
"expo-image-picker": "~11.0.3",
"expo-keep-awake": "^10.0.1",
"expo-linking": "~2.4.2",
"expo-secure-store": "~11.0.3",
"expo-splash-screen": "~0.13.5",
"expo-status-bar": "~1.1.0",
"expo-system-ui": "~1.0.0",
"expo-updates": "~0.10.13",
"formik": "^2.2.9",
"jest-expo": "~43.0.1",
"native-base": "^3.3.7",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-agora": "^3.5.1",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-svg": "12.1.1",
"react-native-toast-message": "^2.1.1",
"react-native-web": "0.17.1",
"react-navigation-header-buttons": "^7.0.1",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#react-native-community/eslint-config": "^3.0.1",
"#testing-library/jest-native": "^4.0.4",
"#testing-library/react-native": "^9.1.0",
"#types/jest": "^27.4.1",
"babel-jest": "^27.3.1",
"babel-preset-react-native": "^4.0.1",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"jest": "^26.6.3",
"jest-react-native": "^18.0.0",
"react-test-renderer": "17.0.1"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|react-native-vector-icons|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
],
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/coverage/**",
"!**/node_modules/**",
"!**/babel.config.js",
"!**/jest.setup.js"
],
"setupFiles": [
"<rootDir>/jest/setup.js"
]
},
"private": true,
"name": "test",
"version": "1.0.0"
}
I just found similar questions but no answers.
I also tried cleaning the npm cache, but with no luck
Thank you in advance!

why react dev server use https automatically?

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"
}
}

React native Android SyntaxError attempted to redefine property 'FileSystem'

I get the following error on my android device after upgrade react native to 0.46.1 .
I using expo to build react native project , i dont know how to fixed it , it take me a lot of time
this is my package.json:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-eslint": "^7.2.1",
"babel-jest": "19.0.0",
"babel-plugin-flow-react-proptypes": "^0.21.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-react-native": "^1.9.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"eslint": "^3.18.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"flow-bin": "^0.38.0",
"jest": "19.0.2",
"jest-expo": "1.0.1",
"react-native-scripts": "0.0.29",
"react-test-renderer": "^15.6.1"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"axios": "^0.16.1",
"expo": "^19.0.0-alpha.0",
"lodash.debounce": "^4.0.8",
"lodash.isempty": "^4.4.0",
"mobx": "^3.1.9",
"mobx-react": "^4.1.8",
"native-base": "2.2.1",
"qs": "^6.4.0",
"react": "16.0.0-alpha.12",
"react-native": "0.46.1",
"react-native-easy-grid": "^0.1.11",
"react-native-fs": "^2.3.3",
"react-native-modalbox": "^1.3.9",
"react-native-radio-buttons": "^0.14.0",
"react-native-storage": "^0.2.2",
"react-native-svg": "^5.3.0",
"react-navigation": "^1.0.0-beta.9",
"singleton": "^1.0.0",
"styled-components": "^1.4.6"
}
}

Resources