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?
Related
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.
I'm building a chart in react using recharts-- I am using an example from their docs here: https://codesandbox.io/s/zen-ellis-30cdb?file=/src/App.tsx
In codesandbox, the project compiles and runs, but you can see the error hint in the code at line 53 (and it generates a lot of warnings in the console).
On my local project it fails to compile and prints the error to the screen. What is causing this, and can it be fixed?
Overload 1 of 2, '(props: Readonly<Props>): Line', gave the following error.
Type '{ dataKey: string; data: { category: string; value: number; }[]; name: string; key: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Overload 2 of 2, '(props: Props, context?: any): Line', gave the following error.
Type '{ dataKey: string; data: { category: string; value: number; }[]; name: string; key: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'. TS2769
130 | {/*{buildSeries()}*/}
131 | {series.map(s => (
> 132 | <Line dataKey="value" data={s.data} name={s.name} key={s.name} />
| ^
133 | ))}
134 | </LineChart>
135 | }```
The prop data does not exist in the Line chart, you should pass it in the AreaChart wrapper
I have a monorepo that contains a design-system made with styled components. In this design system I have a Heading component that takes a 'level' prop to adjust the CSS of the heading.
Heading
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
}
export const Heading: React.FC<HeadingProps> = ({ level = '1', children, ...rest }) => {
return (
<HeadingStyled level={level} {...rest}>
{children}
</HeadingStyled>
)
}
Usage
To use this Heading component I simply pass a level to it for the styling and the as prop to adjust what HTML is rendered.
<Heading as="h2" level="2">
Header 2
</Heading>
Problem
When I use this component I get a typescript error on the as prop
Type '{ children: string; as: string; level: "2"; }' is not assignable to type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
Property 'as' does not exist on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
I have tried:
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
as?: React.Element | JSX.Element | JSX.IntrinsicElements
}
You're close! JSX.IntrinsicElements is an interface whose keys are the labels of the HTML tags. It itself is not a union of all HTML tags.
That means that all you need to do is
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
// ...
as?: keyof JSX.IntrinsicElements // Note the keyof!
}
Now as's signature is shown by TS as:
(JSX attribute) HeadingProps.as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 156 more ... | undefined
Which means your code will now work exactly as expected
<Heading as="h2" level="2"> // No TS errors! ✅
Header 2
</Heading>
TS playground link
in completion to #Aron's answer , this code working for me (styled-component + styled-system)
{ as?: ComponentType<any> | keyof JSX.IntrinsicElements | string | undefined }
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 }))
this error happen with Asp.net core 2 and angular 4 after running the application in seconds
angular CLI:
Angular CLI: 1.7.0
Node: 6.11.3
OS: win32 x64
Angular: 4.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped
#angular/cli: 1.7.0
#angular-devkit/build-optimizer: 0.3.1
#angular-devkit/core: 0.3.1
#angular-devkit/schematics: 0.3.1
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.5.0
#schematics/angular: 0.3.1
#schematics/package-update: 0.3.1
typescript: 2.3.4
webpack-hot-middleware: 2.18.2`enter code here`
webpack-merge: 4.1.0
webpack: 2.5.1
app.shared.module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
VehicleFormComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'vehicles/new', component: VehicleFormComponent },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
ouput error :
ERROR in [at-loader] ./ClientApp/app/components/app/app.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/counter/counter.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/fetchdata/fetchdata.component.ts:4:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/home/home.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/navmenu/navmenu.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/vehicle-form/vehicle-form.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
error image: