I installed #react-native-firebase/auth and I get all the time these errors
Invariant Violation: Native module cannot be null.
... 9 more stack frames from framework internals
Invariant Violation: "main" has not been registered. This can happen
if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called. at
node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in
reportException at
node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19
in handleException at
node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in
handleError at
node_modules/#react-native/polyfills/error-guard.js:49:36 in
ErrorUtils.reportFatalError
I already googled a lot, pod installed, linked manually, removed, what ever it took.
Anyone knows how to fix it?
{
...
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#apollo/client": "^3.5.8",
"#babel/cli": "^7.16.7",
"#expo/react-native-action-sheet": "^3.13.0",
"#firebase/auth": "^0.19.4",
"#invertase/react-native-apple-authentication": "^2.1.5",
"#react-native-community/masked-view": "^0.1.11",
"#react-native-firebase/app": "^14.5.0",
"#react-native-firebase/auth": "^14.5.0",
"#react-native-picker/picker": "2.2.1",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/core": "^6.1.0",
"#react-navigation/native": "^6.0.8",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"babel-plugin-module-resolver": "^4.1.0",
"expo": "~44.0.0",
"expo-apple-authentication": "~4.1.0",
"expo-av": "~10.2.0",
"expo-constants": "~13.0.1",
"expo-crypto": "~10.1.1",
"expo-font": "~10.0.4",
"expo-image-picker": "~12.0.1",
"expo-linear-gradient": "~11.0.3",
"expo-linking": "~3.0.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"firebase": "^9.6.1",
"formik": "^2.2.9",
"graphql": "^16.2.0",
"moment": "^2.29.1",
"native-base": "^3.3.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-circular-progress": "^1.3.7",
"react-native-dotenv": "^3.3.1",
"react-native-draggable-flatlist": "^3.0.4",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "^2.2.0",
"react-native-pager-view": "5.4.9",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-progress": "^5.0.0",
"react-native-reanimated": "^2.4.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-snap-carousel": "^3.9.1",
"react-native-svg": "12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.1",
"rn-tourguide": "^3.2.0",
"styled-components": "^5.3.3",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"typescript": "~4.3.5"
},
"private": true
}
Updated: 17.02.2022 So everyone how is facing this issues, I got the answer to clarify that Expo Go doesn't support native modules. So it wasn't rather the issue itself but more with Expo. It is recommended to switch to EAS build and not more Expo Go.
Related
I am building a nuxt ssr app and whenever I run build command, I get this error of css-loader related to Invalid options object.
ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue)
Module build failed (from ./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, icss?, sourceMap?, importLoaders?, esModule? }
at validate (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:98:11)
at Object.loader (D:\Dev\Vuejs\Nuxt\nuxt-app\node_modules\#nuxt\webpack\node_modules\css-loader\dist\index.js:36:28)
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./node_modules/vue-style-loader!./node_modules/#nuxt/webpack/node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"scoped":false,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue) 4:14-295
# ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue
# ./node_modules/vue2-google-maps/dist/main.js
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/GoogleMap.vue
# ./components/GoogleMap.vue
# ./components/AddPost.vue
# ./components/Header.vue
# ./layouts/nossr.vue
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./.nuxt/client.js
I have install the css-loader as well but the issue persists. Below is my package.json
{
"name": "test",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
"test": "jest"
},
"dependencies": {
"#azure/storage-blob": "12.6.0",
"#capacitor-community/http": "1.0.0",
"#capacitor/android": "2.4.6",
"#capacitor/core": "2.4.6",
"#ffmpeg-installer/ffmpeg": "1.1.0",
"#fortawesome/fontawesome-svg-core": "1.2.28",
"#fortawesome/free-brands-svg-icons": "5.13.0",
"#fortawesome/free-solid-svg-icons": "5.13.0",
"#fortawesome/vue-fontawesome": "0.1.10",
"#mathieustan/vue-datepicker": "^0.2.11",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/svg": "^0.4.0",
"#vue-stripe/vue-stripe": "4.1.1",
"axios": "^0.24.0",
"azure-storage": "^2.10.4",
"capacitor-resources": "2.0.5",
"cordova-res": "0.15.3",
"core-js": "^3.15.1",
"cors": "2.8.5",
"cropperjs": "1.5.9",
"crypto-js": "4.0.0",
"css-loader": "5.0.0",
"debounce": "1.2.0",
"fluent-ffmpeg": "2.1.2",
"jquery": "1.9.1",
"lodash": "4.17.21",
"lru-cache": "6.0.0",
"luxon": "1.25.0",
"masonry-layout": "4.2.2",
"moment": "^2.9.0",
"moment-timezone": "^0.5.33",
"number-abbreviate": "^2.0.0",
"nuxt": "^2.15.7",
"photoswipe": "^5.2.4",
"postcss": "8.1.10",
"postcss-import": "13.0.0",
"postcss-loader": "4.1.0",
"postcss-url": "10.1.1",
"push-dir": "^0.4.1",
"rxjs": "6.6.3",
"simple-vue-validator": "0.16.0",
"style-loader": "^3.3.1",
"stylus-loader": "^6.2.0",
"underscore": "^1.13.1",
"v-datatable-light": "0.8.2",
"v-lazy-image": "1.4.0",
"video-metadata-thumbnails": "1.0.22",
"vue-datatables-net": "1.4.1",
"vue-datetime": "1.0.0-beta.13",
"vue-loader": "14.2.4",
"vue-meta": "2.4.0",
"vue-quill-editor": "3.0.6",
"vue-router": "3.3.4",
"vue-rx": "6.2.0",
"vue-scroll": "^2.1.13",
"vue-select": "^3.10.3",
"vue-svg-loader": "^0.16.0",
"vue-tables-2": "^2.3.1",
"vue-the-mask": "^0.11.1",
"vue-tippy": "^4.7.2",
"vue-toast-notification": "0.4.1",
"vue2-datepicker": "3.8.2",
"vue2-google-maps": "0.10.7",
"vue2-timepicker": "^1.1.6",
"vuejs-clipper": "3.0.3",
"vuejs-datepicker": "1.6.2",
"vuetable-2": "2.0.0-beta.4",
"vuex": "3.4.0",
"vuex-persistedstate": "3.0.1",
"weekstart": "1.0.1"
},
"devDependencies": {
"#capacitor/cli": "2.4.6",
"#vue/cli-plugin-babel": "~4.4.0",
"#vue/cli-service": "~4.4.0",
"#vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "^27.0.5",
"eslint": "6.7.2",
"jest": "^27.0.5",
"sass": "^1.50.1",
"sass-loader": "^10.2.1",
"source-map-loader": "^3.0.0",
"vue-jest": "^3.0.4",
"vue-masonry-css": "1.0.3"
},
"main": "index.js",
"license": "MIT"
}
I have searched alot but couldn't find any solution. kindly help me out. Thanks in advance!
This question is not really solvable without having the whole context and making an in-depth analysis of all the packages one by one: upgrading the legacy ones, removing the deprecated ones and figuring out what kind of specific configuration is in place (Stylus for example).
The given reproduction kinda shows the issue, but we cannot just solve them in package.json because it may break the logic that is based on those specific versions.
Since the project is private, there is no real way to help here without having more info.
When i deploy my vue application with firebase deploy i get a error in de console. I only use the firebase firestore and deployment.
t.INTERNAL.registerService is not a function
has someone a solution?
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/vue-fontawesome": "^0.1.6",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"moment": "^2.24.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-firestore": "^0.3.22",
"vue-izitoast": "^1.2.1",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.3",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.1.1",
"vuexfire": "^3.0.0-alpha.18"
},
"devDependencies": {
"#tailwindcss/custom-forms": "^0.2.0",
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-plugin-eslint": "^3.10.0",
"#vue/cli-plugin-pwa": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"tailwindcss": "^1.1.2",
"vue-template-compiler": "^2.6.10"
}
That particular error is usually a problem in the import of the firebase/app library dependency.
Try running the following command and it should fix the issue:
npm install #firebase/app --save
Error! You've attempted to require #react-native-firebase/auth version '6.2.0', however, the #react-native-firebase/app module is of a different version (6.3.4).
I get this error whenever I launch the app. I've tried to reinstall all the modules, to delete and reinstall, to install all react native firebase modules to version 6.3.4, to version 6.2.0 but still nothing.
I can't use the firebase package because I've implemented firebase differently.
Do you have any idea what should I do?
Package.json:
"name": "Vanto",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-firebase/app": "^6.2.0",
"#react-native-firebase/auth": "^6.2.0",
"#react-native-firebase/storage": "^6.2.0",
"#types/react": "^16.9.17",
"#types/react-native": "^0.60.31",
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-admob": "^2.0.0-beta.6",
"react-native-appearance": "^0.3.1",
"react-native-gesture-handler": "^1.5.3",
"react-native-image-picker": "^2.3.0",
"react-native-ionicons": "^4.6.4",
"react-native-navigation-bar-color": "^1.0.0",
"react-native-reanimated": "^1.4.0",
"react-native-restart": "0.0.14",
"react-native-splash-screen": "^3.2.0",
"react-native-typescript-transformer": "^1.2.13",
"react-native-vector-icons": "^6.6.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
"react-navigation-tabs": "^2.6.2",
"styled-components": "^5.0.1",
"typescript": "^3.7.5",
"uninstall": "0.0.0"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
Fixed by cleaning node cache and yarn cache as well as reinstalling react native firebase modules all in 6.2.0
I use in my project react template - React Isomorphic Redux Admin Dashboard
Try to compile the react app with this template:
1. npm install yarn install
2. npm run build dev or yarn run build
and every time I get this error when use yarn for instance:
yarn run v1.13.0
$ node build && node copy
Creating an optimized production build...
Failed to compile.
./node_modules/nprogress/nprogress.css
Module build failed: BrowserslistError: Unknown browser query dead
at Array.forEach ()
BrowserslistError when try to compile the react app with yarn
When I use npm I get the same error, but with different ....css file.
Here img of error with npm
BrowserslistError when try to compile the react app with npm
isomorphic#2.9.3 build /Users/romank/code/instagram/public
node build && node copy "dev"
Creating an optimized production build...
Failed to compile.
./src/containers/App/global.css
Module build failed: BrowserslistError: Unknown browser query dead
at Array.forEach ()
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! isomorphic#2.9.3 build: node build && node copy "dev"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the isomorphic#2.9.3 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/romank/.npm/_logs/2019-02-21T15_10_28_618Z-debug.log
Here is my package.json :
{
"name": "isomorphic",
"version": "2.9.3",
"private": true,
"dependencies": {
"antd": "^3.6.5",
"antd-local-icon": "^0.1.3",
"auth0-lock": "^11.1.2",
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "^8.0.2",
"babel-preset-react-app": "^3.1.0",
"babel-runtime": "6.26.0",
"card-react": "^1.2.7",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"chart.js": "^2.5.0",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cp": "^0.2.0",
"cp-cli": "^1.1.2",
"cp-file": "^6.0.0",
"cp-folder": "^1.0.8",
"css-loader": "0.28.7",
"d3-shape": "^1.0.6",
"dotenv": "4.0.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-react-intl": "^1.4.8",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.0.1",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"express": "^4.15.3",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"firebase": "^5.2.0",
"fixed-data-table-2": "^0.8.8",
"frappe-charts": "^0.0.8",
"fs-extra": "^7.0.0",
"globalize": "^1.2.3",
"history": "^4.6.3",
"html-webpack-plugin": "2.29.0",
"immutable": "^3.8.1",
"immutable-devtools": "^0.0.7",
"jest": "20.0.4",
"js-info-bubble": "git+https://github.com/RedQ/js-info-bubble.git",
"js-rich-marker": "^1.1.2",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"nprogress": "^0.2.0",
"object-assign": "4.1.1",
"polished": "^1.7.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-inline-rtl": "^0.9.8",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"prop-types": "^15.5.10",
"raf": "3.4.0",
"react": "^16.2.0",
"react-addons-shallow-compare": "^15.5.2",
"react-big-calendar": "^0.17.0",
"react-chartjs-2": "^2.5.7",
"react-codemirror": "^1.0.0",
"react-count-down": "^1.1.0",
"react-dates": "12.2.4",
"react-dev-utils": "^4.2.1",
"react-dnd": "^2.3.0",
"react-dnd-html5-backend": "^2.3.0",
"react-dom": "^16.2.0",
"react-drawer": "^1.2.5",
"react-dropzone-component": "^3.0.0",
"react-element-resize": "^0.2.1",
"react-error-overlay": "1.0.6",
"react-flexbox-grid": "^2.0.0",
"react-flip-move": "^2.9.2",
"react-google-charts": "^1.6.0",
"react-grid-layout": "^0.16.2",
"react-instantsearch": "^4.0.7",
"react-intl": "^2.3.0",
"react-ladda": "^5.0.6",
"react-motion-drawer": "^2.1.7",
"react-perfect-scrollbar": "^0.2.0",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-sidebar": "^2.3.2",
"react-smooth-scrollbar": "^8.0.6",
"react-speech-recognition": "^1.0.4",
"react-tag-input": "^4.7.2",
"react-tags": "^0.2.2",
"react-test-renderer": "^16.2.0",
"react-throttle": "^0.3.0",
"react-trend": "^1.2.3",
"react-vis": "^1.7.2",
"react-window-size-listener": "^1.0.10",
"react-yandex-maps": "^2.3.0",
"react-youtube": "^7.4.0",
"recharts": "^1.0.0-alpha.2",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-saga-firebase": "0.10.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.0",
"rheostat": "^2.1.1",
"rich-marker": "^0.0.1",
"smooth-scrollbar": "^8.2.5",
"style-loader": "0.19.0",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"sw-precache-webpack-plugin": "0.11.4",
"uppy": "^0.30.0",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3",
"yandex-map-react": "^1.1.1"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-polyfill": "^6.26.0",
"enzyme": "^3.2.0",
"enzyme-to-json": "^3.3.0",
"fs-extra": "^7.0.0",
"google-maps-react": "^1.1.0",
"leaflet": "^1.2.0",
"leaflet-routing-machine": "^3.2.5",
"leaflet.markercluster": "^1.0.6",
"mv": "^2.1.1",
"react-app-rewired": "1.4.0",
"redux-mock-store": "^1.2.3",
"webpack-php-loader": "^0.5.0"
},
"scripts": {
"build": "node build && node copy"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
How can I fix this error? Did anyone face to this problem?
By the way, how do better run the npm and yarn commands with sudo or without?
Thank you.
I have a meteor app that follows this file structure, https://guide.meteor.com/structure.html#example-app-structure.
In /client/main.js my code looks like this
import '/imports/startup/client';
console.log("this ran in client/main.js");
When I run meteor, the log shows, however, when I start the service with meteor --production, the log does not show.
Any idea or headings would be greatly appreciated!
FYI: This is a meteor react app with server-side rendering. Here is my package.json if it helps.
{
"dependencies": {
"#babel/runtime": "^7.0.0-beta.54",
"autoprefixer": "^7.1.6",
"aws-sdk": "^2.282.1",
"bcrypt": "^1.0.3",
"core-js": "^2.5.1",
"desandro-matches-selector": "^2.0.2",
"ev-emitter": "^1.1.1",
"fizzy-ui-utils": "^2.0.7",
"get-size": "^2.0.3",
"history": "^4.7.2",
"jquery": "^3.3.1",
"marked": "^0.3.19",
"meteor-node-stubs": "~0.2.11",
"moment": "^2.21.0",
"outlayer": "^2.1.1",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-google-maps": "^9.4.5",
"react-helmet": "^5.2.0",
"react-markdown": "^3.3.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"s-grid": "^1.2.1"
},
"devDependencies": {}
}
Just to close this question, I believe my usage of --production flag is not correct in evaluating why client's logs are not shown in prod vs --production vs local.