Build Windows Electron App on M1 Mac Not Working - electron

Does anyone know if it's possible to build the electron app for Windows on an M1 Mac? I have tried and it is not working, however, I've not found or missed documentation that covers this subject.
Issue
The application builds correctly within the Mac, without any errors. When trying to install into a Windows machine, it does not complete and a modal appears asking to find the location of the application's shortcut.
In case I'm asked to see what packages I'm using with my application.
"dependencies": {
"#tonaljs/tonal": "^4.6.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"electron-store": "^8.0.1",
"hooper": "^0.3.4",
"moment": "^2.29.1",
"music-tempo": "^1.0.3",
"node-machine-id": "^1.1.12",
"register-service-worker": "^1.7.1",
"vee-validate": "^3.4.5",
"vue": "^2.6.14",
"vue-awesome": "^4.3.1",
"vue-custom-range-slider": "^0.2.3",
"vue-select": "^3.11.2",
"vuex": "^3.6.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-plugin-pwa": "^4.5.0",
"#vue/cli-service": "^4.5.13",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"electron": "^16.0.7",
"electron-devtools-installer": "^3.2.0",
"electron-icon-builder": "^2.0.1",
"electron-notarize": "^1.1.1",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-cli-plugin-electron-builder": "^2.1.1",
"vue-template-compiler": "^2.6.11"
},
"peerDependencies": {
"jquery": "^3.6.0"
}

Related

React native iOS release EAS build crashing

I created a build with this procedure: https://docs.expo.dev/build/setup/, so another developer installed the build on his physical device and the app crashed after splash screen, so, in order to debug it, I created a release build to run on iOS simulator (as I don't have an iPhone - physical device) with this procedure: https://docs.expo.dev/build-reference/simulators/, the build succeeded and I downloaded the app and installed in on to my iOS simulator by drag-drop, the same thing happened, it crashed after splash screen (with no error logs as usual) just a Problem report for myProjectName...
Upon further investigation, I used the console in macOS and launched the app, and when the app crashed, I captured the error which was: Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'j.Constants') but now, when I searched the internet, I got nothing related to this error.
package.json:
{
"name": "social-app",
"version": "0.2.14",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": "https://github.com/MyRepo/social-app.git"
},
"scripts": {
"start": "expo start --dev-client",
"metro": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"eject": "expo eject",
"clean": "yarn cache clean",
"test": "jest --watchAll",
},
"jest": {
"preset": "jest-expo"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint --ignore-path .gitignore . --fix"
]
},
"dependencies": {
"#expo-google-fonts/montserrat": "^0.2.2",
"#expo/metro-config": "^0.3.11",
"#expo/vector-icons": "^12.0.0",
"#firebase/auth-types": "^0.11.0",
"#firebase/firestore-types": "^2.5.0",
"#react-native-async-storage/async-storage": "~1.15.0",
"#react-native-community/hooks": "^2.8.1",
"#react-native-community/netinfo": "7.1.3",
"#react-native-community/progress-bar-android": "^1.0.4",
"#react-native-community/progress-view": "^1.3.1",
"#react-native-community/push-notification-ios": "^1.10.1",
"#react-native-firebase/app": "^14.5.0",
"#react-native-firebase/auth": "^14.5.1",
"#react-native-firebase/firestore": "^14.5.0",
"#react-native-firebase/functions": "^14.7.0",
"#react-native-firebase/messaging": "^14.5.0",
"#react-native-firebase/storage": "^14.7.0",
"#react-native-masked-view/masked-view": "0.2.6",
"#react-native-picker/picker": "2.2.1",
"#react-native-seoul/masonry-list": "^1.1.4",
"#react-navigation/bottom-tabs": "^6.2.0",
"#react-navigation/core": "^6.1.1",
"#react-navigation/drawer": "^6.3.1",
"#react-navigation/material-top-tabs": "^6.1.1",
"#react-navigation/native": "^6.0.8",
"#react-navigation/native-stack": "^6.6.2",
"#react-navigation/stack": "^6.1.1",
"#redux-devtools/extension": "^3.2.2",
"#segment/analytics-react-native": "^2.1.9",
"#segment/sovran-react-native": "^0.2.6",
"#sentry/react": "^6.18.1",
"#sentry/react-native": "^3.2.13",
"babel-plugin-inline-dotenv": "^1.6.0",
"buffer": "^6.0.3",
"dotenv": "^16.0.0",
"expo": ">=44.0.0-0 <45.0.0",
"expo-app-loading": "~1.3.0",
"expo-asset": "~8.4.6",
"expo-av": "~10.2.0",
"expo-camera": "~12.1.2",
"expo-constants": "~13.0.1",
"expo-contacts": "~10.1.0",
"expo-crypto": "~10.1.1",
"expo-dev-client": "~0.8.6",
"expo-device": "~4.1.0",
"expo-document-picker": "~10.1.3",
"expo-file-system": "~13.1.4",
"expo-font": "~10.0.4",
"expo-gl": "~11.1.1",
"expo-gl-cpp": "~11.1.0",
"expo-haptics": "~11.1.0",
"expo-image-manipulator": "~10.2.0",
"expo-image-picker": "~12.0.1",
"expo-intent-launcher": "~10.1.0",
"expo-linear-gradient": "~11.0.3",
"expo-media-library": "~14.0.0",
"expo-notifications": "~0.14.0",
"expo-sharing": "~10.1.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-updates": "~0.11.7",
"expo-video-thumbnails": "~6.1.0",
"formik": "^2.2.9",
"gl-react": "^5.0.0",
"gl-react-expo": "^5.0.0",
"libphonenumber-js": "^1.9.49",
"lodash-es": "^4.17.21",
"lottie-ios": "^3.2.3",
"lottie-react-native": "5.0.1",
"moment": "^2.29.1",
"react": "17.0.1",
"react-devtools": "^4.24.3",
"react-devtools-core": "^4.24.3",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-android-keyboard-adjust": "^1.2.0",
"react-native-color-matrix-image-filters": "^5.2.10",
"react-native-device-country": "^1.0.2",
"react-native-draggable-flatlist": "^3.0.6",
"react-native-fast-image": "^8.5.11",
"react-native-fs": "^2.19.0",
"react-native-gesture-handler": "~2.1.0",
"react-native-get-random-values": "~1.7.0",
"react-native-gifted-chat": "^0.16.3",
"react-native-hide-with-keyboard": "^1.2.1",
"react-native-image-crop-picker": "^0.37.3",
"react-native-image-picker": "^4.7.3",
"react-native-image-viewing": "^0.2.2",
"react-native-keychain": "^8.0.0",
"react-native-pager-view": "5.4.9",
"react-native-paper": "^4.11.2",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "~2.3.1",
"react-native-root-toast": "^3.3.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-vector-icons": "^9.1.0",
"react-native-video-processing": "^2.0.0",
"react-native-view-shot": "3.1.2",
"react-native-web": "0.17.1",
"react-native-webview": "11.15.0",
"react-redux": "^7.2.6",
"react-redux-firebase": "^3.11.0",
"realm": "^10.13.0",
"reanimated-bottom-sheet": "^1.0.0-alpha.22",
"redux": "^4.1.2",
"redux-firestore": "^1.0.0",
"sentry-expo": "^4.1.0",
"stream-chat-expo": "^4.3.1",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"#babel/plugin-proposal-optional-chaining": "^7.16.7",
"#babel/plugin-transform-arrow-functions": "^7.16.7",
"#babel/plugin-transform-shorthand-properties": "^7.16.7",
"#babel/plugin-transform-template-literals": "^7.16.7",
"#babel/preset-typescript": "^7.16.7",
"#babel/runtime": "^7.12.5",
"#firebase/app-types": "^0.7.0",
"#react-native-community/eslint-config": "^2.0.0",
"#semantic-release/changelog": "^5.0.1",
"#semantic-release/git": "^9.0.0",
"#types/lodash-es": "^4.17.4",
"#types/react": "^17.0.21",
"#types/react-dom": "^17.0.17",
"#types/react-native": "^0.64.3",
"#types/react-native-vector-icons": "^6.4.6",
"#types/react-navigation": "^3.4.0",
"#types/react-redux": "^7.1.15",
"#types/uuid": "^8.3.0",
"#types/yup": "^0.29.11",
"babel-jest": "^26.6.3",
"babel-preset-expo": "9.0.2",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-simple-import-sort": "^7.0.0",
"husky": "^4.3.6",
"jest": "^26.6.3",
"jest-expo": "^44.0.0",
"lint-staged": "^10.5.3",
"metro-react-native-babel-preset": "^0.64.0",
"patch-package": "^6.4.7",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.2.1",
"prettier-eslint": "^15.0.0",
"react-test-renderer": "17.0.1",
"semantic-release": "^17.3.7",
"typescript": "~4.3.5"
},
"resolutions": {
"react-devtools": "4.24.3",
"react-devtools-core": "4.24.3"
},
"private": true,
"publishConfig": {
"access": "restricted"
}
}
So, can someone please help me how can I find the root cause for this? As the app is working as expected in debug mode...

React native upgrade to .69 from .64

I had to update to the most recent version of react native for my project. But no matter what iu do I can't get this error to go away on IOS ONLY. Android works fine even though this error is mostly reported as a android issue.
ERROR Invariant Violation: new NativeEventEmitter() requires a non-null argument.
I have updated every package that is possible cleared all caches etc etc.
Here is the package list.
"dependencies": {
"#babel/preset-env": "^7.1.6",
"#freakycoder/react-native-helpers": "^1.0.2",
"#react-native-async-storage/async-storage": "^1.17.8",
"#react-native-community/clipboard": "^1.5.1",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-community/push-notification-ios": "^1.10.1",
"#react-native-community/toolbar-android": "git+https://github.com/react-native-toolbar-android/toolbar-android.git#master",
"#react-native-picker/picker": "^2.4.3",
"#react-navigation/bottom-tabs": "^6.3.2",
"#react-navigation/elements": "^1.3.4",
"#react-navigation/routers": "^6.1.1",
"#react-navigation/stack": "^6.2.2",
"#rneui/base": "^4.0.0-rc.6",
"#rneui/themed": "^4.0.0-rc.6",
"#sentry/react-native": "^5.0.0-alpha.1",
"#sergiorj/react-native-snap-carousel": "^4.0.1",
"axios": "^0.27.2",
"babel-preset-react-native": "^4.0.1",
"date-fns": "^2.29.1",
"fs": "0.0.1-security",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
"gulp-rename": "^2.0.0",
"gulp-sym": "^1.0.2",
"lodash": "^4.17.20",
"main": "^1000.0.1",
"os": "^0.1.2",
"path": "^0.12.7",
"react": "18.0.0",
"react-addons-shallow-compare": "^15.6.3",
"react-native": "0.69.3",
"react-native-awesome-alerts": "^2.0.0",
"react-native-camera": "^4.2.1",
"react-native-charts-wrapper": "^0.5.9",
"react-native-clean-project": "^4.0.1",
"react-native-codegen": "^0.71.0",
"react-native-config": "^1.4.6",
"react-native-copilot": "^2.5.1",
"react-native-crypto": "^2.2.0",
"react-native-datepicker": "^1.7.2",
"react-native-default-preference": "^1.4.4",
"react-native-device-info": "^10.0.2",
"react-native-dotenv": "^3.3.1",
"react-native-dynamic-vector-icons": "^1.2.0",
"react-native-fast-image": "^8.5.11",
"react-native-geolocation-service": "^5.3.0",
"react-native-get-random-values": "^1.8.0",
"react-native-image-slider-box": "^1.1.24",
"react-native-improved-text-input": "0.0.1",
"react-native-inappbrowser-reborn": "^3.7.0",
"react-native-maps": "^1.2.0",
"react-native-modal": "^13.0.1",
"react-native-permissions": "^3.6.0",
"react-native-push-notification": "^8.1.1",
"react-native-qrcode-scanner": "^1.5.5",
"react-native-randombytes": "^3.6.1",
"react-native-reanimated": "^2.9.1",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-shared-preferences": "^1.0.2",
"react-native-spinkit": "^1.5.1",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^12.4.3",
"react-native-swipe-gestures": "git+https://github.com/wymsee/react-native-swipe-gestures.git#master",
"react-native-tracking-transparency": "^0.1.1",
"react-native-url-polyfill": "^1.3.0",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.23.0",
"react-style-proptype": "^3.2.2",
"typescript": "^4.7.4",
"uuid": "^7.0.3"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/runtime": "^7.18.9",
"#react-native-community/eslint-config": "^2.0.0",
"#react-navigation/native": "^6.0.11",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "^4.1.0",
"deprecated-react-native-prop-types": "^2.3.0",
"eslint": "^7.32.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.70.3",
"patch-package": "^6.4.7",
"platform": "^1.3.5",
"prettier": "2.4.1",
"prop-types": "^15.8.1",
"react-native-gesture-handler": "^2.5.0",
"react-test-renderer": "18.0.0",
"shelljs": "^0.8.5",
"yargs": "^17.5.1"
},
"jest": {
"preset": "react-native"
}

Error: main.jsbundle does not exist. This must be a bug with

My React Native app works fine in iOS debug mode. But, when I tried to run the app in release mode from xCode, I am getting a build error. However, in android it works fine in both debug and release mode.
File /Xcode/DerivedData/myapp-ewjafyqwkgvybabvuzpfqtubujvv/Build/Products/Release-iphonesimulator/ios.app/main.jsbundle does not exist. This must be a bug with.
I tried replacing the Build Phases > Bundle React Native code and images with the following code, but still, I am getting the above error.
cd $PROJECT_DIR/..
export NODE_BINARY=node
./node_modules/react-native/scripts/react-native-xcode.sh
Dependencies used in my project are:
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#expo/vector-icons": "^12.0.5",
"#homielab/react-native-auto-scroll": "^0.0.8",
"#react-native-async-storage/async-storage": "^1.15.15",
"#react-native-clipboard/clipboard": "^1.8.4",
"#react-navigation/native": "^5.9.4",
"#walletconnect/react-native-dapp": "^1.6.6",
"apollo-client": "^2.6.10",
"axios": "^0.21.1",
"base-64": "1.0.0",
"bignumber.js": "^9.0.2",
"buffer": "6.0.3",
"currency-formatter": "^1.5.8",
"ethereumjs-abi": "^0.6.8",
"expo": "~42.0.0",
"expo-app-loading": "^1.1.2",
"expo-font": "~9.2.1",
"expo-linear-gradient": "~9.1.0",
"expo-linking": "^2.2.3",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"graphql": "^15.5.1",
"humanize-duration": "^3.27.0",
"kilomega": "^1.0.4",
"moment": "^2.29.1",
"nanoid": "^3.1.12",
"node-libs-browser": "2.2.1",
"path-browserify": "0.0.0",
"query-string": "^7.0.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-auto-scrolling": "^3.0.2",
"react-native-awesome-marquee": "^1.1.3",
"react-native-crypto": "2.2.0",
"react-native-dotenv": "^3.2.0",
"react-native-fast-image": "^8.5.11",
"react-native-gesture-handler": "~1.10.2",
"react-native-get-random-values": "1.5.0",
"react-native-localhost": "1.0.0",
"react-native-marquee": "^0.3.2",
"react-native-modal": "^13.0.0",
"react-native-picker-select": "^8.0.4",
"react-native-reanimated": "~2.2.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-side-menu": "^1.1.3",
"react-native-side-menu-updated": "^1.3.2",
"react-native-stream": "0.1.9",
"react-native-svg": "12.1.1",
"react-native-text-ticker": "^1.14.0",
"react-native-textinput-effects": "^0.6.2",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12",
"react-native-webview": "^11.6.5",
"react-native-youtube-iframe": "^2.1.2",
"react-redux": "^7.2.4",
"react-router-native": "^5.2.0",
"react-router-native-animate-stack": "^1.3.2",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"rn-nodeify": "^10.3.0",
"vendor-copy": "^3.0.1",
"walletconnect": "^1.6.5",
"web3": "^1.5.2"
}

Rails 6 [Webpacker] Compiling... takes longs time in development enviroment

Webpacker (5.1.1) with Rails 6.1.4 takes a long time while compiling css and js files for existing project and extremely very slow.
[Web packer] Compiling...
Environments: Ruby 2.7.2, Node(v14.15.5), NPM 6.14.11 and yarn 1.22.4
This happens once there is no problem, i.e. when the server starts and initiating the first request.
The problem is, it starts compiling whenever I change the code in js or css and takes again the same time around 4/5 minutes.
I think compiling everything instead of the modified file.
I also tried live reloading ./bin/webpack-dev-server, It also produced the same result.
After doing Google, I tried a few steps below but to no avail
rm -rf node_modules rake assets:clobber yarn install
Did I miss any configuration/package related to compilation. package.json file looks like:
{
"private": true,
"dependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/plugin-proposal-optional-chaining": "^7.7.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/polyfill": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"#rails/webpacker": "^5.1.1",
"#ttskch/select2-bootstrap4-theme": "^1.3.4",
"autosuggest-highlight": "^3.1.1",
"axios": "^0.18.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bootstrap": "4.1.3",
"classnames": "^2.2.6",
"clipboard": "^2.0.6",
"date-arithmetic": "^4.0.1",
"dom-helpers": "^3.4.0",
"dotdotdot-js": "^4.0.9",
"easyzoom": "^2.5.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^3.0.2",
"fast-deep-equal": "^2.0.1",
"font-awesome": "^4.7.0",
"formik": "^1.5.0",
"hard-source-webpack-plugin": "^0.13.1",
"history": "^4.9.0",
"immutability-helper": "^2.7.0",
"jquery": "^3.3.1",
"jquery-bar-rating": "^1.2.2",
"jquery-countdown": "^2.2.0",
"jquery-ui": "^1.12.1",
"libphonenumber-js": "^1.7.8",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"moment-locales-webpack-plugin": "^1.0.7",
"moment-timezone": "^0.5.23",
"moment-timezone-data-webpack-plugin": "^1.0.3",
"odometer": "^0.4.8",
"pc-bootstrap4-datetimepicker": "^4.17.50",
"popper": "^1.0.1",
"postcss-cssnext": "^3.1.0",
"prop-types": "^15.6.1",
"rails-erb-loader": "^5.5.2",
"rails-ujs": "^5.2.4-2",
"rc-time-picker": "3.4.0",
"react": "^16.8.6",
"react-actioncable-provider": "^1.0.3",
"react-autosuggest": "^9.3.4",
"react-copy-to-clipboard": "^5.0.2",
"react-cropper": "^1.2.0",
"react-custom-scrollbars": "git://github.com/sivakovigor/react-custom-scrollbars.git",
"react-dates": "git://github.com/ihar-lapitski/react-dates.git#feature/change-month-on-date-change",
"react-dom": "^16.8.6",
"react-dotdotdot": "^1.2.3",
"react-dropzone": "^10.1.4",
"react-facebook-login": "^4.0.1",
"react-geosuggest": "^2.12.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^5.2.1",
"react-image-magnify": "^2.7.4",
"react-lazyload": "^2.5.0",
"react-loader-spinner": "^2.2.0",
"react-overlays": "^1.2.0",
"react-paginate": "^6.0.0",
"react-places-autocomplete": "^7.2.0",
"react-player": "^1.7.1",
"react-rating": "^1.6.2",
"react-redux": "^5.0.7",
"react-rnd": "^9.0.4",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.2",
"react-slick": "^0.23.1",
"react-text-mask": "^5.4.3",
"react-textarea-autosize": "^7.1.0",
"react-to-print": "^2.4.0",
"react-toastify": "^5.0.0",
"react-transition-group": "^2.5.0",
"react-validation": "^3.0.7",
"reactstrap": "^8.0.0",
"recompose": "^0.27.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"scroll": "^2.0.3",
"scroll-doc": "^0.2.1",
"select2": "^4.0.6-rc.1",
"slick-carousel": "^1.8.1",
"startbootstrap-sb-admin": "^4.0.0",
"turbolinks": "^5.2.0",
"uncontrollable": "^7.0.0",
"url-search-params-polyfill": "^5.0.0",
"validator": "^10.6.0",
"vanilla-lazyload": "^12.0.0",
"webp-loader": "^0.4.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2",
"whatwg-fetch": "^3.0.0",
"yup": "^0.27.0"
},
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.16.4"
}
}
Thanks.

React Mentions TypeError: Cannot read property 'style' of undefined

I have recently installed the react-rails gem to replace an old react integration inside of my rails app.
But it seems like it broke the "react-mentions" package in production. It still works fine in my local dev environnement.
When I try to access the page with my react-mention input, it throws this error in my console :
TypeError: can't access property "style", _types.PropTypes is undefined
getWrappedComponent webpack:///./node_modules/substyle/lib/defaultStyle.js?:216
render webpack:///./node_modules/substyle/lib/defaultStyle.js?:196
React 7
unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.production.min.js?:311
React 5
_rollbar_wrapped https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.4.6/rollbar.min.js:1
o https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.4.6/rollbar.min.js:2
React 10
unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.production.min.js?:311
React 6
.....
These are the dependencies of my package.json
"dependencies": {
"#ant-design/compatible": "^1.0.2",
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-runtime": "^7.9.6",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.9.4",
"#blueprintjs/core": "^3.19.1",
"#blueprintjs/datetime": "^3.14.0",
"#blueprintjs/icons": "^3.11.0",
"#blueprintjs/select": "^3.11.1",
"#blueprintjs/table": "^3.8.1",
"#material-ui/core": "^4.5.2",
"#material-ui/icons": "^4.5.1",
"#nivo/line": "^0.59.3",
"#rails/webpacker": "^5.1.1",
"antd": "^4.3.1",
"babel-loader": "^8.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap": "^4.3.1",
"classnames": "^2.2.6",
"dom-to-image-improved": "^2.8.0",
"file-saver": "^2.0.2",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"numeral": "^2.0.6",
"papaparse": "^5.1.0",
"postcss-cssnext": "^3.1.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0-beta.11",
"react-dom": "^16.13.1",
"react-dropdown-tree-select": "^2.1.1",
"react-highlight-words": "^0.16.0",
"react-mentions": "^3.3.1",
"react-orgchart": "^1.0.5",
"react-render-html": "^0.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-select": "^3.0.8",
"react-simple-maps": "^0.12.1",
"react-step-wizard": "^5.3.0",
"react-stepzilla": "^6.0.2",
"react-twitter-embed": "^3.0.3",
"react_ujs": "^2.6.1",
"recharts": "^1.8.5",
"select2": "^4.0.12",
"url-search-params-polyfill": "^7.0.0",
"whatwg-fetch": "^3.0.0"
},
How can I fix this issue ? I'm not sure what I'm missing!

Resources