Develop Reference

Upgarding to react 18 issues in typescript

I 'm working on a large typescript with react project and I 've decided to upgrade to react 18 new version and since I did the following
npm install react#18
npm install react-dom#18
npm install #types/react-dom#18
npm install #types/react#18
The app has been broken and got me several error while I 've resolved most of them I got more and more
for example I got this error for this code in a type script
const pages = useMemo(() => {
let page = startPage;
const pageRange = [];
while (page <= endPage) {
pageRange.push(page);
page += 1;
}
return pageRange;
}, [startPage, endPage]);
error message Argument of type 'number' is not assignable to parameter of type 'never'. TS2345
I know the fix to assign the type to the defined array here but this pattern is repeated in the codebase , so i 'm not sure if upgrading to react 18 need some configration with type-script , i 've checked the react docs for upgrading to new react 18 but there was no mention for this .
my current typescript version is "typescript": "^3.7.5"

Adding the following to my package.json solved the problem
{
"overrides": {
"#types/react": "^18.0.0"
}
}
source : https://github.com/facebook/react/issues/24304#issuecomment-1094565891

React Native Error Cannot find module 'metro-config/src/defaults/blacklist'

I'm currently working on a project in React Native, yesterday it was working perfectly with no errors, and now all of a sudden I'm getting this error.
error Cannot find module 'metro-config/src/defaults/blacklist'
Require stack:
- /Users/sri/Downloads/cc_x/reactnativelcsapp/VitalitiApp/metro.config.js
I've tried soo many solutions, removing the node modules and installing it back, updating the modules, looking to change the backlist. I've checked my files and I can't find the blacklist file but I'm trying to fix it but honestly have no idea how to fix it. I was wondering if anyone would know what to do.

the blacklist file seems to be renamed as exclusionList
const blacklist = require('metro-config/src/defaults/exclusionList');
use this line instead in metro.config.js

In newer versions of metro-config the function is now called exclusionList. So change the blacklist reference with exclusionList in metro-config.js file which is located in the project root directory.
const exclusionList = require('metro-config/src/defaults/exclusionList');
If still issue persists, then add metro-config as a dev dependency:
npm install -D metro-config

I had the same Issue as others. Changing it to
const exclusionList = require('metro-config/src/defaults/exclusionList');
Fixed my issue.
I had to create metro.config.js and insert the following code since I was using AWS Amplify:
const blacklist = require('metro-config/src/defaults/exclusionList');
module.exports = {
resolver: {
blacklistRE: blacklist([/amplify\/#current-cloud-backend\/.*/]),
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};

I had the same error in myapp/node_modules/expo-yarn-workspaces/index.js
From my require stack so I opened this file and found const blacklist = require('metro-config/src/defaults/blacklist'); into my app node modules.
So I changed it to
const blacklist = require('metro-config/src/defaults/exclusionList');
which fixed my problem

Package.json variable not being picked up

I have the following functionality that locally loads some products out of stock depending on the command run in the terminal:
const updates = process.env.option === "oos" ? oosUpdates : insUpdates
log.info("updates: ", JSON.stringify(updates))
const result = await loadUpdateVariants(cache, updates as UpdateType[])
In my package.json I have:
"update:oos": "ts-node src/loaders/mock/update-variants.ts --option oos",
"update:ins": "ts-node src/loaders/mock/update-variants.ts --option ins"
however when I run yarn update:oos I am getting the instock products meaning that this process.env.option === "oos" is not working out correctly.

process.env gives you access to environment variables. If you want to use environment variables, you can set them like this:
"update:oos": "OPTION=oos ts-node src/loaders/mock/update-variants.ts",
"update:ins": "OPTION=ins ts-node src/loaders/mock/update-variants.ts"
This is the "vanilla" (without any extra dependencies) approach - but may encounter issues on Windows. If you want your command to work well cross-platform, you might consider using cross-env

Uncaught TypeError: this.getExtraNgModuleProviders is not a function

I am working on a repository that keeps throwing this error on the console:
Uncaught TypeError: this.getExtraNgModuleProviders is not a function.
The projects compiles fine on "ng serve" but it shows a blank page and that error on the console. I have tried many things but I couldn't find a way out.
I have tried uninstalling and installing #angular/compiler but didn't work. The problem seems to be with JitCompiler not finding this.getExtraNgModuleProviders
I think the function this.getExtraNgModuleProviders in the JitCompiler should be this._getExtraNgModuleProviders instead on the compiler.js. Since all the functions around it seem to include the underscore.
UPDATE:
I don't think the function name has anything to do with it since other developers can run the project fine and they have the same Jit compiler.js file. For reference: This is where it takes me when I click the error on the console
function JitCompiler(_metadataResolver, _templateParser, _styleCompiler, _viewCompiler, _ngModuleCompiler, _summaryResolver, _reflector, _compilerConfig, _console, getExtraNgModuleProviders) {
this._metadataResolver = _metadataResolver;
this._templateParser = _templateParser;
this._styleCompiler = _styleCompiler;
this._viewCompiler = _viewCompiler;
this._ngModuleCompiler = _ngModuleCompiler;
this._summaryResolver = _summaryResolver;
this._reflector = _reflector;
this._compilerConfig = _compilerConfig;
this._console = _console;
this.getExtraNgModuleProviders = getExtraNgModuleProviders;//<- error is pointed here
this._compiledTemplateCache = new Map();
this._compiledHostTemplateCache = new Map();
this._compiledDirectiveWrapperCache = new Map();
this._compiledNgModuleCache = new Map();
this._sharedStylesheetCount = 0;
this._addedAotSummaries = new Set();
}
All other developers have the same compiler.js as mine.
Any help will be appreciated.

I just did the following and the error was resolved. It is because of version incompatibility of your #angular/platform-browser-dynamic.
npm uninstall #angular/platform-browser-dynamic
npm install #angular/platform-browser-dynamic

I think your angular/platform-browser-dynamic not updated. Change in your package.json like this;
"#angular/platform-browser-dynamic": "~8.0.0"
after delete node modules and run "npm install" .
Hope it helps.

Had the same error message. We are using .net core with angular.
ng build worked flawless, however starting from VS threw the Uncaught TypeError: this.getExtraNgModuleProviders is not a function exception.
I could fix this with a new clone of our repo, probably something in the VS cache caused the issue.

React Native Image Picker: Cannot read property 'showImagePicker' of undefined

I'm following the example exactly as shown in https://github.com/marcshilling/react-native-image-picker using react-native-image-picker, via terminal with react-native run-ios and coding via Atom editor.
I did npm install react-native-image-picker#latest --save and currently the dependency in package.json shows: "react-native-image-picker": "^0.22.8",
And I clicked a button to trigger the imagePicker but I am getting the error: Cannot read property 'showImagePicker' of undefined.
What am I doing wrong?
Here is the code
import ImagePicker from 'react-native-image-picker'
var Platform = require('react-native').Platform
var options = {
title: 'Select Avatar',
customButtons: [
{name: 'fb', title: 'Choose Photo from Facebook'},
],
storageOptions: {
skipBackup: true,
path: 'images'
}
}
export default class chooseImage extends Component {
constructor() {
super()
this.state = {
avatarSource: "",
}
}
_uploadImage() {
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
// You can display the image using either data...
const source = {uri: 'data:image/jpeg;base64,' + response.data, isStatic: true};
// or a reference to the platform specific asset location
if (Platform.OS === 'ios') {
const source = {uri: response.uri.replace('file://', ''), isStatic: true};
} else {
const source = {uri: response.uri, isStatic: true};
}
this.setState({
avatarSource: source
})
}
})
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this._uploadImage}
underlayColor='transparent'
>
<Image
source={this.state.avatarSource} style={styles.uploadAvatar}
/>
</TouchableHighlight>
</View>
)
}
}
EDIT
When I console.log(ImagePicker)

use manual installation
set permission
/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

cannot read property y of undefined means you have a statement x.y
such that x is undefined. in this case, x is ImagePicker.
My best guess is that your import statement causes the issue.
try this:
var ImagePicker = require('react-native-image-picker');
instead of
import ImagePicker from 'react-native-image-picker'
Which is also what the example suggests.
if you want to stick with the import statement,
try this:
import * as ImagePicker from 'react-native-image-picker'
Which imports the module as ImagePicker and puts it inside the scope.
For more info, see: MDN on import statement

I have been working for hours to solve this problem! Finally after adding correctly these lines in MainApplication.java it worked as a charm. Do not forget to rebuild the project.

it seems like IMagePicker is not defined.
Have you tried using
var ImagePicker = require('react-native-image-picker');
instead of the first line?

Hi there are few things that you can try: Run react-native link
Make sure you already completed this step
http://prntscr.com/hftr17
If not: your last chance is remove completely your code. Clone a new one.
I was successfully make it work by follow those.
Hope it can give you something.

Rebuild your app. Run the command react-native run-ios and react-native run-android.

Rebuilding your app will just mean you'll get the same error.
You need to go through Xcode for iOS and edit your settings.gradle manually for this to work:
https://github.com/react-community/react-native-image-picker
You don't need to do the steps for both Android and iOS, but the steps outlined for either platform are crucial
So unless you have already executed react-native link, you will need to go through each numbered steps and make sure your binaries are properly linked.

If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.
In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .
Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.
Note. = RNImagePicker.a is now libRNImagePicker.a
and make sure you add this in your project build phase the lib's build phase itself.
Then you may compile and run it.

Note :
After installation you have to restart the project as react-native run-ios or
react-native run-android
May be u installed the picker but didn't restart the packager
: )

If you are using xcode and getting this error on simulator or real device make sure after installing and react link command you follow manual instructions. as described ie.
In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...> .
Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSPhotoLibraryAddUsageDescription and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions.
Note. = RNImagePicker.a is now libRNImagePicker.a and make sure you add this in your project build phase the lib's build phase itself.
Then you may compile and run it.

As per your first comment you mentioned that you are not using Xcode you are using Atom and Terminal. In most of the cases only npm install will be enough but there are some platform specific cases that can be achieved either by linking it using react-native link or by following the manual installation steps provided in the document. if you are not using Xcode then its not possible for you to link this library completely for IOS platform. Make sure you use Xcode and follow the manual steps or else react-native link to solve your issue.

I had the same problem and in iOS it was due to the permission missing, even in the simulator. See the permissions here:
https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Install.md
I just missed "NSPhotoLibraryAddUsageDescription" and it was enough to get the "Cannot read property 'showImagePicker' of undefined" error.