Issue: [ts] Unable to locate the term 'React'

Due to specific requirements, I have made some customizations to the Ionic component: range. I changed the class name of the component from Range to CustomRange (with selector: custom-range):

https://github.com/ionic-team/ionic/blob/master/core/src/components/range/range.tsx

To achieve this, I copied and pasted the files from:

https://github.com/ionic-team/ionic/tree/master/core/src/components/range

and placed them inside the directory:

/src/components/custom-range

Subsequently, I imported the module: CustomRange into the declarations in the file: app.module.ts.

I also corrected the references in the import statements within the file: range.tsx, which appeared to be correct.

However, I am encountering errors such as:

[ts] Cannot find name 'React'.
(property) JSX.IntrinsicElements.slot: JSXElements.SlotAttributes

As shown in the following image:

https://i.sstatic.net/Z8JS5.png

Does anyone have any suggestions on how to resolve this issue?

Thank you!

typescriptionic-frameworkionic4

Answer №1

It appears that in order to utilize JSX with Ionic, you will need to include these specific settings within your tsconfig.json:

"jsx": "react",
"jsxFactory": "h",

Once you have these settings in place, importing something from @stencil/core should provide the global declaration of h, ensuring everything works smoothly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

I'm currently working on a project where there's a component named ListItemTextStyle. Within that component, the prop type is defined as follows: import { LinkProps, ListItemButtonProps, } from '@mui/material'; type IProps = LinkP ...

reactjstypescriptmaterial-ui

What is the correct way to set up a custom class instance with specific parameters at the top level?

Is it possible to utilize the defineString(), defineInt, ... functions within a top-level custom class constructor? defineString() returns a StringParam object which has a value() method. I am looking to use parameterized configuration to initialize an in ...

node.jstypescriptfirebasegoogle-cloud-functionsfirebase-tools

Is importing all models into every component considered poor practice?

At my workplace, there is a practice in the legacy code where every single model is imported into all components, regardless of whether they are needed or not. For example: import * as models from '../../view-models/models' ....... let parrot: m ...

angulartypescript

It seems that there is an issue with Ionic v4 and Angular when trying to retrieve the inner text of ion-slide elements in loop

I have a set of statuses displayed in <ion-slide> using the *ngFor directive to loop through a specified array: status: string[] = [ 'Active', 'Inactive', 'Ended' ]; @ViewChild('slideWithNav') slides: Io ...

angularionic-frameworkslideionic4ion-slides

How can input be prevented on keydown within angular6?

Is there a way to disable the input field only when a keydown event occurs, without affecting other input fields? xyz.component.html <input type="text" (keydown)="disableInput($event)"> // <-- Disable if keydown <input type="text" (keydown) ...

javascripttypescriptangular6

Learn how to bring a component into another component within Angular

I have developed a component named CopySchedulefromSiteComponent and now I am looking to import it into another component called SiteScheduleComponent. However, I am unsure of the correct way to do this. The CopySchedulefromSiteComponent contains one fiel ...

angulartypescript

Accurate linking to the interface while retrieving information from a specified URL

Just started with Angular and attempting to assign the returned json data to my interface, but it's not working as expected. Check out the code I'm using below: Stackblitz Json URL ...

javascriptangulartypescriptrxjssingle-page-application

Expanding Material UI functionality across various packages within a monorepository

Currently, I am using lerna to develop multiple UI packages. In my project, I am enhancing @material-ui/styles within package a by incorporating additional palette and typography definitions. Although I have successfully integrated the new types in packag ...

typescriptmaterial-uilernamodule-augmentation

Eliminate redundant entries from an Ionic3 array

Looking for a solution to eliminate duplicate values in the storage array within Ionic3 this.storage.get('thestations').then((val) => { for(let i =0;i<val.length;i++){ if(this.newarray.indexOf(this.newarray) == -1) ...

javascriptarraysangularjsionic-framework

Navigating Between Pages with Parameters in Ionic 2 (starter app)

I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...

javascriptangulartypescriptionic2ionic3

Is it possible to capture and generate an AxiosPromise inside a function?

I am looking to make a change in a function that currently returns an AxiosPromise. Here is the existing code: example(){ return api.get(url); } The api.get call returns an object of type AxiosPromise<any>. I would like to modify this function so ...

javascripttypescriptaxios

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Currently, I am attempting to record the date and time in the JavaScript console. Despite the code successfully logging the dates, an error message persists: Note: The code is functioning properly, with the dates being displayed in the console. It is only ...

javascriptnode.jsangulartypescriptecmascript-6

Encountered Error: Unknown property 'createStringLiteral', causing TypeError in the Broken Storyshots. This issue is happening while using version ^8.3.0 of jest-preset-angular

When I upgraded to jest-angular-preset ^8.3.0 and tried to execute structural testing with npm run, I encountered the following error: ● Test suite failed to run TypeError: Cannot read property 'createStringLiteral' of undefined at Obje ...

angulartypescriptstorybookts-jestangular-storybook

Tips for showcasing images stored in Azure Blob storage

Currently, I am developing an application that requires loading images from a web novel stored in Azure Storage Accounts as blobs. While I have enabled anonymous reads to show the image upon request successfully via a web browser or Postman, I am facing an ...

typescriptazure

Cease the firing of ion-change until the values have been successfully loaded from storage

My settings page contains multiple ion-toggle's. There's an onChange method to update local storage when toggled. Standard procedure involves checking existing values in storage on page load and mapping them to the toggles using ngModel. <tab ...

javascriptangularionic-frameworkionic4

The favicon refuses to load

Image 'http://localhost:8000/favicon.ico' could not be loaded as it contravened the Content Security Policy directive "default-src 'none'". It is important to note that since 'img-src' was not specifically defined, 'defau ...

angularionic-frameworkionic5

What is the best way to set up environments for Google App Engine (GAE

After developing a web app with server and client components, I decided to deploy it to Google Cloud using App Engine. Although the deployment process was successful, the main issue lies in the non-functioning env_variables that are crucial for the applic ...

reactjstypescriptexpressgoogle-app-enginegoogle-cloud-platform

Error: Unable to set value, val.set is not a defined function for this operation (Javascript

Encountering a problem while running the function val.set(key, value), resulting in a type error TypeError: val.set is not a function within the file vendor-es2015.js. Here's the simplified code snippet: import { Storage } from '@ionic/storage& ...

angulartypescriptecmascript-6ionic4capacitor

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Once the table is created in TypeORM, make sure to insert essential master data such as types and statuses

Hey there, I have a question regarding NestJS and typeORM. My issue is with inserting default values into tables after creating them. For example, I have a priority table where I need to insert High/Medium/Low values. Despite trying everything in the typeo ...

typescriptnestjstypeorm