Create React App Working on Desktop and Android but is Blank on IOS - regex

Update:
As Zachary Haber suggested it was a regex problem. There are some symbols that arent supported by old browsers.
I'm using Firebase and react and it working great on Desktop. However, on mobile, there is a white screen. Any suggestions why?
Here is the App: https://land-ified.com
Here is my package json file:
{
"name": "leavemailapp",
"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",
"axios": "^0.19.2",
"dayjs": "^1.8.24",
"firebase": "^7.14.4",
"jwt-decode": "^2.2.0",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-modal": "^3.11.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"node-sass": "^4.14.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.1%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage": "https://land-ified.com/",
"proxy": "https://europe-west3-leaveyourmail-4c1f1.cloudfunctions.net/api"
}
Thanks!

Regex lookbehind doesn't work in Safari or firefox currently. You'll need to figure out how to re-write your regexes to not use this feature as it will cause your app to fail to load on either of those browsers.
https://caniuse.com/#feat=js-regexp-lookbehind
From UserSettings.js line 26:
const userReg = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/
From validators.js line 19:
export const isUsername = (username) => {
// 8-20 characters only letter . _ and can start and end in letter No __ .. _. ._
const regEx = /^(?=.{3,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/
return username.match(regEx)
}
As for the regex:
^(?=.{3,20}$)([a-zA-Z0-9]+([_.][a-zA-Z0-9]+)*)$ should match everything you were trying to match.
This uses the concept of unrolling the loop to match one or more alphanumeric characters that are followed by ( an underscore or period that have one or more alphanumeric characters afterwards ) repeated as many times as needed.
The [_.] acts as the special case for the construct allowing us to remove the rest of your lookaheads (other than the length lookahead) as they are covered by the main pattern instead.
regex101 with some basic strings to match for testing.

Related

Artifactory jfrog - download artifact with regex and exclude

I'm just trying to download every artifact for example:
maven-dsd-snapshot-local/com/dsds/aem/tenants/dcihub/dcihub-wrapper/1221.1.0-SNAPSHOT
/something-wrapper-2023.1.0-20230206.113149-31.zip
but NOT
maven-dsd-snapshot-local/com/dsds/aem/platform/platform-wrapper/2023.1.0-SNAPSHOT/platform-wrapper-2023.1.0-20230206.113149-51.zip
That is what I'm trying to do in Jenkins using Artifactory plugin:
Artifactory_BUILD_PATH = """{
"files": [
{
"pattern": "${repo}/(?!.*platform-wrapper).*-wrapper/.*.zip",
"target": "/tmp/artifacts/",
"flat": "true",
"build": "${buildName}/LATEST"
}
]
}"""
However when I do that I get:
java.lang.ArrayIndexOutOfBoundsException
With negative regex this works and match correctly all the wrapper paths:
Artifactory_BUILD_PATH = """{
"files": [
{
"pattern": "${repo}/*-wrapper/*.zip",
"target": "/tmp/artifacts/",
"flat": "true",
"build": "${buildName}/LATEST"
}
]
}"""
END GOAL:
Match all paths that have wrapper in it, but exclude platform-wrapper.
The download command only supports wildcards. It does not support regular expressions.
You can make use of the exclusions field in order to exclude certain paths.
See the File Specs documentation for more details.

Build script doesn't copy all files with babel

I want to create, for the first time, a npm package from a react component. I'm following this tutorial here
But when I try the build script, I have some error. Because I'm working on windows/vscode powershell terminal, I changed rm-rf to del/s/q/f and installed cross-env.
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files"
Now it partially worked but many files are missing in dist folder.
Here is the error msg
ReferenceError: [BABEL] src\lib\components\DatePicker.jsx: Unknown option: C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-preset-react-app\index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options. (While processing preset: "C:\\Users\\romai\\Workspace\\Openclassrooms\\Frontend\\HRNet\\hrnet_react_datepicker\\node_modules\\babel-preset-react-app\\index.js")
at Logger.error (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:226:20)
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\Users\romai\Workspace\Openclassrooms\Frontend\HRNet\hrnet_react_datepicker\node_modules\babel-core\lib\transformation\file\index.js:212:65)
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.
Here is the src structure
Here is my current builded dist folder
.babelrc
{
"presets": [
["react-app", { "absoluteRuntime": false }]
]
}
Actual package.json
{
"name": "xxx",
"version": "1.0.0",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"private": false,
"description": "datepicker component for personnal openclassrooms hrnet project",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx"
},
"scripts": {
"start": "react-scripts start",
"build": "del/s/q/f dist && cross-env NODE_ENV=production babel src/lib --out-dir dist --copy-files",
"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": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^10.0.1",
"cross-env": "^7.0.3",
"sass": "^1.49.9"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0"
}
}
Thanks in advance
I got the same error and decided to debug. This debugging lead me to create.js in node_modules/babel-preset-react-app, which contains "overrides". This is the key that is being rejected. Commenting that part out gives the following error:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "blabla/frontend/shared/node_modules/babel-preset-react-app/index.js")
This lead me to brave-search "babel-cli 7", which gives https://babeljs.io/docs/en/babel-cli.
A note here states Note: Please install #babel/cli and #babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x. Other than npx, you can also drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel
Notice it states #babel/cli. Looking at package-lock.json, I see babel-cli. Removing that one and installing #babel/cli gave me version 7.
TLDR: uninstall babel-cli, install #babel/cli.

CRA / PostCSS 8 - Cannot read properties of undefined (reading 'unprefixed')

I have a little problem with postcss, i update this package because of audit issue.
First when i started my app, but i fixed this one by adding
"postcss-preset-env": "^7.2.3",
in my package.json resolutions.
But then, when i tried to build my app, i get the following one, and i dont find anything directly related to this specific
Cannot read properties of undefined (reading 'unprefixed')
complete error here:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
cssnano-util-raw-cache: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
Failed to compile.⠂⸩ ⠧ : timing npm:load Completed in 32ms
Cannot read properties of undefined (reading 'unprefixed')
CompileError: Begins at CSS selector undefined
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm timing command:run-script Completed in 16564ms
npm timing npm Completed in 16715ms
i know it because of
"resolutions": {
"postcss": "^8.2.13",
...
}
if i remove this, the error go away (but my 'yarn audit' rise vulnerabilities)
Can someone help me to understand the error? What kind of css issue can make this error? I found on google that sometimes, empty rules like
.myrules {
}
Can rise error, but not exactly the one i get, and even, i looked each scss file without finding empty rules.
my complete package.json:
{
"name": "x",
"version": "0.1.0",
"private": true,
"dependencies": {
"#redux-offline/redux-offline": "^2.6.0",
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/dom": "^8.11.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^27.0.3",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-router-dom": "^5.3.1",
"#yaireo/tagify": "^4.9.5",
"axios": "^0.24.0",
"date-fns": "^2.28.0",
"dompurify": "^2.3.3",
"dotenv": "^10.0.0",
"enzyme": "^3.11.0",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-parser": "^5.4.0",
"jest-webpack-resolver": "^0.3.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"react": "^17.0.2",
"react-datepicker": "^4.6.0",
"react-dom": "^17.0.2",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.15.1",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-test-renderer": "^17.0.2",
"react-transition-group": "^4.4.2",
"redux": "^4.1.1",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.4.0",
"sass": "^1.43.3",
"typescript": "^4.1.2",
"url-search-params-polyfill": "^8.1.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "REACT_APP_VERSION=$npm_config_vers REACT_APP_YMD=$npm_config_ymd REACT_APP_CUSTO=$npm_config_customer REACT_APP_ENV=$npm_config_env yarn startenv",
"build": "REACT_APP_VERSION=$npm_config_vers REACT_APP_YMD=$npm_config_ymd REACT_APP_CUSTO=$npm_config_customer REACT_APP_ENV=$npm_config_env yarn buildenv",
"startenv": "sh -ac '. .env.${REACT_APP_CUSTO}.${REACT_APP_ENV}; react-scripts start'",
"buildenv": "sh -ac '. .env.${REACT_APP_CUSTO}.${REACT_APP_ENV}; react-scripts build'",
"test": "jest test --watch --config=jest.config.js",
"trans-extract": "i18next",
"trans-convert-po-to-json": "node scripts/trans-po-to-json.js",
"trans-convert-json-to-po": "node scripts/trans-json-to-po.js"
},
"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/dompurify": "^2.3.1",
"#types/enzyme": "^3.10.10",
"#types/react-datepicker": "^4.3.4",
"#types/react-html-parser": "^2.0.2",
"#types/react-test-renderer": "^17.0.1",
"#types/react-transition-group": "^4.4.4",
"#types/redux-mock-store": "^1.0.3",
"#types/yaireo__tagify": "^4.9.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
"mock-local-storage": "^1.1.19",
"ts-jest": "26.4.2"
},
"resolutions": {
"node-forge": "^1.0.0",
"browserslist": "^4.16.5",
"glob-parent": "^5.1.2",
"immer": "^9.0.6",
"nth-check": "^2.0.1",
"ansi-regex": "^5.0.1",
"nanoid": "^3.1.31",
"postcss": "^8.2.13",
"postcss-preset-env": "^7.2.3",
"follow-redirects": "^1.14.7"
}
}

RN Android Build Issue - Execution failed for task ':app:packageDebug'

My client app is already published on Google Play and it crashes
It maybe a stupid behavior from me , when I noted it works well for IOS,
I quickly deployed it for Android and published it
I tried to run it in my development environment using
sudo react-native run-android
it makes the below error
What's the potential errors ?
I'm using MAC High Sierra
my package.json file
{
"name": "WOFA",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"accordion-collapse-react-native": "^0.1.10",
"is-email": "^1.0.0",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-easy-grid": "^0.2.1",
"react-native-firebase": "~5.5.4",
"react-native-gesture-handler": "^1.3.0",
"react-native-grid-list": "^1.0.9",
"react-native-image-picker": "^1.0.1",
"react-native-image-slider-show": "^1.0.3",
"react-native-modal": "^11.1.0",
"react-native-paypal-lib": "^1.0.9",
"react-native-side-drawer": "^1.1.7",
"react-native-slider": "^0.11.0",
"react-native-snackbar": "^1.0.1",
"react-native-svg": "^9.5.1",
"react-native-touchable-safe": "^1.1.2",
"react-navigation": "^3.11.0"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/runtime": "^7.5.1",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
the packages which need native linking are : [react-native-firebase , react-native-gesture-handler , react-native-image-picker , react-native-paypal-lib , react-native-svg]
I got similar error on Windows 10.
In my case the culprit was node v.12.
Uninstall node and install LTS version of node.
(Currently node v.10.16.0)
Best Luck. 👍

Can't match regex with sed

I'm trying to match a pattern (\^|\~?)(\d|x|\*)+\.(\d|x|\*)+\.(\d|x|\*)+ with sed without luck.
The file I'm running through is this:
{
"name": "something",
"version": "0.0.1",
"description": "some desc",
"main": "gulpfile.js",
"directories": {
"test": "tests"
},
"dependencies": {
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"gulp-clean": "^0.3.2",
"jquery": "^2.1.4",
"lodash": "^4.0.0",
"moment": "^2.13.0",
"moment-timezone": "^0.5.0",
"radium": "^0.16.2",
"react": "^15.1.0",
"react-bootstrap-sweetalert": "^1.1.10",
"react-dom": "^15.1.0",
"react-timeago": "^2.2.1",
"sprintf": "^0.1.5",
"smoothscroll": "~0.2.2"
},
"devDependencies": {
"babel": "^6.3.26",
"babelify": "^7.2.0",
"browserify": "~12.0.1",
"console-stamp": "^0.2.0",
"estraverse-fb": "^1.3.1",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"lodash": "4.5.1",
"lodash.assign": "^3.2.0",
"lodash.isfunction": "^3.0.8",
"lodash.reduce": "^4.3.0",
"node-sass": "3.4.2",
"react-bootstrap": "^0.29.4",
"react-intl": "2.1.0",
"reactify": "1.1.1",
"sweetalert": "^1.1.3",
"vinyl": "^1.1.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.4.0",
"jsx-to-string": "~0.2.11"
},
"optionalDependencies": {
"pkg-save": "~1.0.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "someurl"
},
"author": "authorname",
"license": "MIT"
}
As you can see in regexr it matches the desired pattern (also matching "version" but that's another issue I'll tackle later):
http://regexr.com/3e324
I'm invoking invoking sed with the following command:
cat package.json | sed 's/(\^|\~?)(\d|x|\*)+\.(\d|x|\*)+\.(\d|x|\*)+/Hello/g' -r
For the sake of brevity, it outputs something like (ie. unfiltered input):
...
"dependencies": {
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"gulp-clean": "^0.3.2",
...
It should replace all digits with "Hello".
What am I doing wrong?
Something to do with bad flags (I've tried /gm)
or not using the correct regex engine (I'm passing the -r option to utilize extended regex)?
While POSIX regular expression support some named character classes, like [[:digit:]] and [[:alnum:]], they do not support shorthand classes such as \d and \w.
Some GNU extensions bring shorthand classes support, but they are restricted to a few of them, \w, \W, \s and \S according to regular-expressions.info.
By replacing the \d in your regular expression to [0-9] I was able to transform your document. The regular expression becomes (\^|\~?)([0-9]|x|\*)+\.([0-9]|x|\*)+\.([0-9]|x|\*)+, or better [~^]([0-9x*]+\.){2}[0-9x*] (thanks Ed Morton !).
As a side note, your command could be rewritten to the following, which does not use cat :
sed -E 's/[~^]([0-9x*]+\.){2}[0-9x*]/Hello/' package.json
And as noted by Matt, you'd be better off using a JSON parser such as jq.