"Unknown named module" error in react native - javascript

I'm creating an app using react native but some imports raise the error from the title: "Unknown named module". This happens with two packages, react-native-material-design and react-native-db-models, so I suspect the problem isn't on the modules but in my setup.
I tried linking the packages with react-native link and repackaging the app using react-native run-android, but none of these solved this issue. I've looked up examples of imports on github, and even copying working code raises the same error.
I tried installing the modules using either yarn and npm. I tried with relative paths like ../../react-native-db-models. Didn't work!
This is how I import the modules:
import RNDBModel from 'react-native-db-models';
import { List, Button, Toolbar, } from 'react-native-material-design';
These are my project dependencies:
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2",
"react-native-db-models": "^0.1.3",
"react-native-material-design": "^0.3.7",
"react-native-md-textinput": "^2.0.4",
"react-native-vector-icons": "0.8.5",
"react-redux": "^5.0.1",
"redux": "^3.6.0",
"redux-logger": "^2.7.4"
},
If React/React Native is incompatible with these modules, how do I figure out which version should I use? Maybe the error has nothing to do with imports and has something to do with my project?

The package server started by react-native start seems to have a cache of the node modules. Stopping and restarting the server solved the issue.
Always restart your react server after installing modules!

A quick check on the package's repository shows 'List' module is no longer available. Here is a link to why it was removed.
So, you will have to remove 'List' module from your import:
import { Button, Toolbar, } from 'react-native-material-design';

Related

Dev Build of Firebase JS SDK after updating imports

I've been trying to silence the warning:
It looks like you're using the development build of the Firebase JS
SDK. When deploying Firebase apps to production, it is advisable to
only import the individual SDK components you intend to use.
For the CDN builds, these are available in the following manner
(replace with the name of a component - i.e. auth, database,
etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-.js
Per the instructions here Warning: It looks like you're using the development build of the Firebase JS SDK, I've updated all of my imports to match this format but the warning is not silenced:
import firebase from "firebase/app";
import "firebase/firestore";
I've searched my code for all instances of from "firebase" and cannot find any that haven't been updated to from "firebase/app", so am a bit stumped. Are there any other imports that could be causing this? Here are my firebase packages in package.json:
"dependencies": {
"firebase": "^8.2.5",
"firebase-functions": "^3.20.0",
"firebase-tools": "^10.2.1",
"firebaseui": "^5.0.0",
"react": "^18.1.0",
"react-firebaseui": "^5.0.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3",
},
The firebase-admin and firebase-functions modules are not for use in frontend web apps. They are for backend nodejs code only. You should remove them from this project.

Navigation error with react native latest version 0.61.4

I upgraded my old project in react native version(0.61.4) then getting error related navigation option undefined.
Old project dependency version:--
"react": "16.8.3",
"react-native": "0.59.5",
"react-navigation": "1.0.0-beta.3",
New Project dependency versions:--
"react": "16.9.0",
"react-native": "0.61.4",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3",
Note:-- I also tried with navigation version 2, 3.
please help
I think the problem is the jump from react-navigation v1 to v4.
Check the createNavigator params
In v4 you should have a navigationConfig param passed like this:
createNavigator(NavigationView, router, navigationConfig);
https://reactnavigation.org/docs/en/custom-navigators.html#createnavigator
If still not working probably you should check the breaking changes from here
https://reactnavigation.org/blog/2018/05/07/react-navigation-2.0.html
and also from v3 and v4.
Adding to Florin's answer, make sure you export wrap your root navigator with appContainer.
Docs: https://reactnavigation.org/docs/en/app-containers.html

Uncaught type error when trying to install keycloak-js with vue and webpack: __WEBPACK_IMPORTED_MODULE_3_keycloak_js__ is not a function

I am trying to install keycloak-js in my vue project as described in this tutorial and when I start my application I keep getting the error
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_keycloak_js__ is not a function
These are my entries in package.json
"keycloak-js": "^7.0.0",
"vue": "^2.5.2",
"webpack": "^3.6.0",
Like in the tutorial I import it with import * as Keycloak from 'keycloak-js' and start it with let keycloak = Keycloak(initOptions) which is the line that throws the error.
I also tried to require keycloak and then it just said Keycloak is not a function.
Could this error be webpack-related? This is imho the only difference between the tutorial and my application. I haven't found anyone else having the same problem.
A co-worker just told me to try an older version of Keycloak and now it works.
"keycloak-js": "^6.0.1",
This is supposedly a bug in keycloak.js version 7.0.0 itself and as far as I know will be patched very soon. Until then I would stick to the latest 6.* version, which is 6.0.1
Try importing the Keycloack with:
import Keycloak from 'keycloak-js';
The keycloak-js 7.x as installed via npm/yarn is broken. The main keycloak.js file includes minified code for dependencies js-sha256 and base64-js inline, and both clobber the module.exports.

_react.default.memo is not a function | wrapWithConnect issues

When wrapping a component with connect()(Component), I am getting an error on my React Native application. "_react.default.memo is not a function (In _react.default.memo(ConnectFunction), _react.default.memo is undefined. How can I resolve this issue?
Screenshot of the error
I believe this issue is based on my version numbers with React and Redux. But I am unable to locate the culprit. This application is in very early development, but perhaps I just forgot to connect something with my store.
Currently my versions from package.json are the following
"dependencies": {
"expo": "^32.0.6",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^7.0.2",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
}
I have tried rolling back react-redux to 6.0.0 and react to 16.5.0 as described in this thread but, I get a different error.
Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
I have tried uninstalling and reinstalling react-redux. (including deleting the folder). I don't even see a call to utils/batch inside that index.js file.
Any help would be greatly appreciated. The component renders correctly before connect is added. Exception happens when export default connect()(ComponentName) is invoked.
if needed, my repository is found here. Since then, though, I have toyed with the versions.
Switching to React Redux 6.0.0 npm install react-redux#6.0.0.
In order to get rid of the Unable to resolve "./utils/batch" from "node_modules/react-redux/lib/index.js"
Clear expo caches with expo r -c.
https://forums.expo.io/t/how-to-clear-the-react-native-packager/1352
I think I was just able to resolve this. I finally caved and installed yarn letting Yarn take over the dependency install seemed to have worked.
My dependencies are running at
"dependencies": {
"expo": "^32.0.6",
"react": "16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"schedule": "^0.4.0"
},
and my app is back to running with everything acting compatible again. Not sure what was done differently with Yarn. But I am relieved that I got this back up. I hope this helps others!

Calling VueLoaderPlugin() causes 'findIndex' undefined error

I'm trying to integrate a Vue CLI app in another web project we are working with. The Vue app itself works when running the dev server bundled with Vue CLI.
The Vue application contains .vue files, so a loader for webpack is needed. I used the setup from the vue-loader documentation. When I ran webpack (via Grunt) I now get the following error:
Warning: Cannot read property 'findIndex' of undefined Use --force to continue.
After a lot of tinkering I figured out that the new VueLoaderPlugin(); line from the documentation mentioned above was the cause of this. However I do need this plugin to get my .vue-files to work.
I am using the following set of loaders, imported using npm via package.json:
{
// ...
"dependencies": {
//...
"webpack": "~3.9.1"
},
"devDependencies": {
// ...
"vue": "^2.5.17",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17"
}
}
I have tried googling for the error but came up empty handed. All help and suggestions are welcome. Cheers!
When fiddling around trying to get the vue-loader to work, at some point I got an error leading me to update webpack to a later version. This version seemed to have deprecated the use of module.loaders in favour of module.rules.
Changing this in the webpack config seems to have made everything work smoothly. Hope someone finds this useful!

Categories