Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript and ReactDOM.render method doesn't accept component

TL;DR

I'm using TypeScript and React. I've defined my AppContainer.tsx component, exported it as default. I'm consuming this in the file app.ts where ReactDOM lives to render it to the targetted dom element. But there I receive the following errors (see image). Read below for more information and links to GitHub repo.

enter image description here

Question: What am I doing, or interpreting, wrong? From all code examples I've seen this should work - but maybe (clearly) I'm missing something. Below is more info and links to the full GitHub repo.


Environment

  • react 15.4.2
  • react-dom 15.4.2
  • typings: https://github.com/aredfox/electron-starter/blob/master/typings.json
  • tsconfig: https://github.com/aredfox/electron-starter/blob/master/tsconfig.json

Code

File '/components/AppContainer.tsx'

/// <reference path="../../../typings/index.d.ts" />

// Top level application component

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import { Component } from 'react';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** COMPONENT **/
export default class AppContainer extends React.Component<{}, {}> {    
    render() {
        return ( <div /> );
    }    
}        
/*------------------------------------------------------------------------------------*/
/*///*/

https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx

File 'app.ts'

/// <reference path="../../typings/index.d.ts" />
/// <reference path="interfaces.d.ts" />

// Setting up react inside the host html

/*------------------------------------------------------------------------------------*/
/** IMPORTS **/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// Components
import AppContainer from './components/AppContainer';
/*------------------------------------------------------------------------------------*/
/*///*/

/*------------------------------------------------------------------------------------*/
/** RENDER TO DOM **/
ReactDOM.render(
    <AppContainer/>,
    document.getElementById('AppContainer')
);
/*------------------------------------------------------------------------------------*/
/*///*/

https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts

Quick Links

  • Git repo: https://github.com/aredfox/electron-starter
    • app.ts file https://github.com/aredfox/electron-starter/blob/master/src/views/app.ts
    • AppContainer.tsx file https://github.com/aredfox/electron-starter/blob/master/src/views/components/AppContainer.tsx
like image 429
Yves Schelpe Avatar asked Jan 27 '17 15:01

Yves Schelpe


People also ask

Why ReactDOM render is not working?

To solve the error, create a root element and use the ReactDOMClient. render method instead. Copied! import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; // 👇️ IMPORTANT: use correct ID of your root element // this is the ID of the div in your index.

Which component do we have to pass to the ReactDOM render () method?

render() The first argument is the element or component we want to render, and the second argument is the HTML element (the target node) to which we want to append it. Generally, when we create our project with create-react-app , it gives us a div with the id of a root inside index.

What can I use instead of ReactDOM render in React 18?

Use createRoot instead" occurs because the ReactDOM. render method has been deprecated. To solve the error, create a root element and use the ReactDOMClient.

How do you render with ReactDOM?

The ReactDOM. render() function takes two arguments, HTML code and an HTML element. The purpose of the function is to display the specified HTML code inside the specified HTML element.


1 Answers

You can't use jsx/tsx syntax inside files which have ts extension.

You can either rename your file to app.tsx, or you can use React.createElement:

ReactDOM.render(
    React.createElement(AppContainer),
    document.getElementById('AppContainer')
);
like image 53
Nitzan Tomer Avatar answered Sep 19 '22 18:09

Nitzan Tomer