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?

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 !

`No overload matches this call` in recharts

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

Angular8 firebase configuration error '#angular/fire/angularfire2'

When trying to 'ng serve' after configuring angular with firebase, I got the error. Even though I googled this error message but could not find anything. In the error message, this issue is related to the library itself.
user#user-MacBookPro post % ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 2.15 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.78 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-02-10T01:58:36.888Z - Hash: 259e06990402b2940abe - Time: 3542ms
ERROR in node_modules/#angular/fire/angularfire2.d.ts:37:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
37 [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:40:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
40 [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? never : K;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:48:78 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
48 [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:48:107 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? never : K; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? never : { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
Type 'T[string]' is not assignable to type '(...args: any) => any'.
48 [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:50:75 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
50 [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
~~~~
node_modules/#angular/fire/angularfire2.d.ts:50:96 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
Type 'T[{ [K in { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]: ReturnType<T[K]> extends Promise<any> ? K : never; }[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]]' is not assignable to type '(...args: any) => any'.
Type 'T[ReturnType<T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]> extends Promise<any> ? { [K in keyof T]: T[K] extends Function ? K : never; }[keyof T] : never]' is not assignable to type '(...args: any) => any'.
Type 'T[{ [K in keyof T]: T[K] extends Function ? K : never; }[keyof T]]' is not assignable to type '(...args: any) => any'.
50 [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
~~~~
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.
This is a package.json file. This project is based on Angular8, firebase version 6.
{
"name": "post",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/fire": "^6.0.0-rc.1",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"firebase": "^7.8.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.24",
"#angular/cli": "~8.3.24",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"#angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
"firebase-tools": "^7.12.1",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1"
}
}
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
//angular-fire
import { AngularFireModule } from "#angular/fire";
import { AngularFirestoreModule } from "#angular/fire/firestore";
// in version 6, StorageBucket changes to BUCKET
import { AngularFireStorageModule, BUCKET } from "#angular/fire/storage";
// component list
import { AddpostComponent } from "../app/addpost/addpost.component";
import { MainComponent } from "../app/main/main.component";
import { PostComponent } from "../app/post/post.component";
// forms module for AddpostComponent
import { FormsModule, ReactiveFormsModule } from "#angular/forms";
import {ServiceService } from "./service.service";
#NgModule({
declarations: [
AppComponent,
AddpostComponent,
MainComponent,
PostComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireStorageModule,
FormsModule,
ReactiveFormsModule
],
providers: [{ provide: BUCKET, useValue: 'gs://angular-firebase-rxjs.appspot.com' }, ServiceService],
bootstrap: [AppComponent]
})
export class AppModule { }

This error is due to TypeScript type checking the definitions file of the AngularFire library.
Notice the errors are from node_modules/#angular/fire/angularfire2.d.ts:37:49.
To avoid this error you have to set some options in tsconfig.json.
tsconfig:
{
//...
compilerOptions: {
"skipLibCheck": true,
//...
}
}
skipLibCheck: Skip type checking of declaration files.
More info on the skipLibCheck option.

{
//...
compilerOptions: {
"skipLibCheck": true,
//...
}
}
this solution not advisable, its may give some build time error, i got error while build with SSR,
i can suggest you to update "rxjs": ,if your are using * version then update it to 9

TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'

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: