deno: v0.35.0 TSX file can't be compiled

index.tsx

import React from "https://dev.jspm.io/react"
export default () => <html>deno</html>;

error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

► file:///Users/keroxp/src/deno/index.tsx:11:22

11 export default () => <html>deno</html>;

I know recently strict option enabled by default for deno compiler but I couldn’t right way to define correct JSX namespace for external resources.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 21 (12 by maintainers)

Most upvoted comments

Fixed in Deno v1.0.3

xcatliu on Jun 1, 2020

I found it difficult to find the right imports and types to remove this error so fwiw here is a working example as of 2020-05-16.

// main.tsx

// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from "https://cdn.pika.dev/@pika/react@v16.13.1";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://cdn.pika.dev/@pika/react-dom@v16.13.1";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom@16.13.1/server.js";

const str: string = ReactDOMServer.renderToString(<div className="deno">land</div>);
console.log(str);

deno run main.tsx

EdAyers on May 16, 2020

@bardiarastin #5726 is published on deno v1.0.2 However, these code still report errors (but works fine on deno v1.0.0):

// main.tsx

// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from "https://cdn.pika.dev/@pika/react@v16.13.1";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://cdn.pika.dev/@pika/react-dom@v16.13.1";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://dev.jspm.io/react-dom@16.13.1/server.js";

const str: string = ReactDOMServer.renderToString(<div className="deno">land</div>);
console.log(str);

$ deno --version
deno 1.0.2
v8 8.4.300
typescript 3.9.2
$ deno run main.tsx                                        

Compile file:///Users/xcatliu/work/test/main.tsx
error: TS2307 [ERROR]: Cannot find module 'https://cdn.pika.dev/@pika/react@v16.13.1' or its corresponding type declarations.
import React from 'https://cdn.pika.dev/@pika/react@v16.13.1';
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at file:///Users/xcatliu/work/test/main.tsx:4:19

TS2307 [ERROR]: Cannot find module 'https://cdn.pika.dev/@pika/react-dom@v16.13.1' or its corresponding type declarations.
import ReactDOM from 'https://cdn.pika.dev/@pika/react-dom@v16.13.1';
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at file:///Users/xcatliu/work/test/main.tsx:7:22

TS2307 [ERROR]: Cannot find module 'https://dev.jspm.io/react-dom@16.13.1/server.js' or its corresponding type declarations.
import ReactDOMServer from 'https://dev.jspm.io/react-dom@16.13.1/server.js';
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at file:///Users/xcatliu/work/test/main.tsx:10:28

TS7026 [ERROR]: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
const str: string = ReactDOMServer.renderToString(<div className="deno">land</div>);
                                                  ~~~~~~~~~~~~~~~~~~~~~~
    at file:///Users/xcatliu/work/test/main.tsx:12:51

TS7026 [ERROR]: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
const str: string = ReactDOMServer.renderToString(<div className="deno">land</div>);
                                                                            ~~~~~~
    at file:///Users/xcatliu/work/test/main.tsx:12:77

Found 5 errors.

xcatliu on May 25, 2020

Similar to the OP, I import React from the jspm CDN.

import React from 'https://dev.jspm.io/react@16.12.0';

The JSX, such as <h1>Hello, World!</h1>, gets rendered server-side (within Deno) to an HTML string and sent in a response using Deno’s std/http server.

In the future, I will likely also try to use JSX for command line apps. Just need to make something like Ink for Deno.

sholladay on Mar 13, 2020