Develop Reference

Dynamically import one Icon using icon-name from react-icons in nextjs/typescript

I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.
This is my code:
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
interface IconProps {
name: string;
}
function Icon({ name }: IconProps) {
const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});
return (
<Suspense fallback={`Loading...`}>
<MyIcon />
</Suspense>
);
}
export default Icon
This is the error:
Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
What am I doing wrong?

I'm getting an error even though I defined a string and I'm getting an error even though I defined a string

import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
filterText = filterText?filterText.toLocaleLowerCase(): null
return filterText ? value.filter((p: Product) => p.name
.toLocaleLowerCase().indexOf(filterText) !== -1) : value;
}
}
TS2322: Type 'string | null' is not assignable to type 'string | undefined'.Type 'null' is not assignable to type 'string | undefined'.
and
TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.Type 'undefined' is not assignable to type 'string'.
enter image description here

Try with this
import {Pipe, PipeTransform} from '#angular/core';
import {Product} from "./product";
#Pipe({
name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
transform(value: Product[], filterText?: string): Product[] {
let pattern = filterText ? filterText.toLocaleLowerCase(): null;
return pattern ? value.filter((p: Product) => p.name.toLocaleLowerCase().indexOf(pattern) !== -1) : value;
}
}
If a filterText is not passed to the function then you got that error because you are trying to assign something to undefined.

Property 'opacity' does not exist on type 'IntrinsicAttributes' throwing and error for view Opacity in React native

After writing this sentence, typescript file shows an error on below line.
React-Native 0.60+
There is a new opacity prop that you can pass in:
<View opacity={true ? 0.5 : 1}> </View>
Error stack: error property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes view opacity.
No overload matches this call. Overload 1 of 2, '(props: ViewProps | Readonly): View', gave the following error. Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
How to resolve this warning, thanks in advance.

I resolved this error by followin code :
<View style={{ opacity: true ? 0.5 : 1 }}>
Happy Coding !

Getting error while setting reducers: Type 'MetaReducer<State, Action>[]' is not assignable to type 'MetaReducer<unknown, Action>[]'

I am getting the following error while attempting to set up my reducers in app.module.ts
Error: src/app/app.module.ts:72:7 - error TS2322: Type 'MetaReducer<State, Action>[]' is not assignable to type 'MetaReducer<unknown, Action>[]'.
Types of parameters 'reducer' and 'reducer' are incompatible.
Type 'unknown' is not assignable to type 'State'.
72 metaReducers,
~~~~~~~~~~~~
How do I fix it? My code is as follows:
const metaReducers: MetaReducer<State>[] = !environment.production ? [logger] : [];
interface State {
router: fromRouter.RouterReducerState<BaseRouterStoreState>;
}
const reducers: ActionReducerMap<unknown> = {};
function logger(reducer: ActionReducer<State>): ActionReducer<State> {
return (state: State | undefined, action: Action): State => {
const result = reducer(state, action);
console.groupCollapsed(action.type);
console.log('prev state', state);
console.log('action', action);
console.log('next state', result);
console.groupEnd();
return result;
};
}
#NgModule({
declarations: [AppComponent],
imports: [
StoreModule.forRoot(reducers, {
// TS2322: Type 'MetaReducer<State, Action>[]' is not assignable to type 'MetaReducer<unknown, Action>[]'. Types of parameters 'reducer' and 'reducer' are incompatible. Type 'unknown' is not assignable to type 'State'.
metaReducers,
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
},
}),
],
bootstrap: [AppComponent],
})
export class AppModule {}

Issue pluging-in an effect for state management

Managing state is giving errors in my Angular 8.0 app using NgRx 8.2.
export interface AppState {
loggedIn: boolean;
userInfo: IPrincipal;
}
export interface State {
state: AppState;
}
export interface IPrincipal {
email: string;
password: string;
}
I have written a simple Login service that returns the required information
Action has been defined like
export const login = createAction('[Login Initiatied] Login',
props<{ principal: IPrincipal }>()
);
export const loginSuccess = createAction('[Login Success] Login',
props<{ userProfile: IUserProfile }>()
);
export const loginFailure = createAction('[Login Failure] Login',
props<{ message: any }>()
);
Userprofile is just another interface with some more details
export interface IUserProfile {
user: IPrincipal;
first: string;
last: string;
}
When I am trying to plugin an effect
import * as AppActions from './actions/login.action';
login$ = createEffect(() =>
this.actions$.pipe(
ofType(AppActions.login),
map( action => action.principal),
exhaustMap( (principal: IPrincipal) =>
this.loginService.loginUser(principal.email, principal.password).pipe(
map(userProfile => of( AppActions.loginSuccess({ userProfile }))),
catchError(message => of( AppActions.loginFailure({ message })))
)
)
)
);
I tried several things but in my effects for the login$ I am getting these errors
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action>'.
Type '{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' is not assignable to type 'Action'.
Property 'type' is missing in type '{}' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
It is somethind obvious I am missing, but just cant get my head around to see what I have missed.
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
It is suppose to return an Observable of Action but it is complaining of not.
I was able to create successfully, by using the earlier version implementation by exporting a class of Action and utilizing that in effect.

You need to return an action from your effect so this line of code
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
You can change to
map(userProfile => new AppActions.loginSuccess({ userProfile }))