Simplest Typescript + React + WebPack example generates errors

Question

When I compile a simple React/Typescript application (shown below), I get a variety of compiler warnings that do not appear to be from within my code.

/// <reference path="main/ambient/react-dom/index.d.ts" />
/// <reference path="main/ambient/react/index.d.ts" />

import * as React from "react";
import { render } from "react-dom";

class Example extends React.Component<any, any> {
  render() {
    return <p> Hello! </p>;
  }
}

render(<Example />, document.getElementById("root"));

Although this example does run after compilation (via WebPack), it generates the following errors:

(19,22): error TS2339: Property 'createElement' does not exist on type '{}'.
(22,9): error TS2339: Property 'Component' does not exist on type '{}'.
(23,13): error TS2339: Property 'render' does not exist on type '{}'.
(23,26): error TS2339: Property 'createElement' does not exist on type '{}'.

I am running React v0.14.8. I am using these typings for React and these typings for React-dom.enter link description here

My question is: Why does this example generate so many errors? How can I resolve these errors?

Requested: tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react"
  },

  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

have you tried without the /// reference ? When using a tsconfig file you don't need those anymore. Also, you said it works with webpack, what version do you have of typescript installed globally? I'm assuming your getting the errors when running tsc — thitemple
– thitemple, Commented Apr 1, 2016 at 14:26
I was able to remove the compiler directives when used with webpack, but not with 'tsc'. tsc seems to work fine though, leading me to believe this might be an issue with webpack/ts-loader. — Rick
– Rick, Commented Apr 1, 2016 at 14:55

Rick · Accepted Answer · 2017-10-06 02:18:51Z

1

I found the solution. The bugs were caused by a plugin in WebPack (new webpack.optimize.OccurenceOrderPlugin()). Removing this plugin solved the problem.

answered Oct 6, 2017 at 2:18

Rick

9,0069 gold badges52 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aditya Singh · Accepted Answer · 2016-04-01 12:40:55Z

0

You need to use typings and define the types for your dependencies. You can also refer a very nice implementation of using TypeScript with React here

answered Apr 1, 2016 at 12:40

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

1 Comment

Rick Over a year ago

I mentioned that I am using typings at the bottom of the question (using the exact tool you mention). Are those not correct?

Collectives™ on Stack Overflow

Simplest Typescript + React + WebPack example generates errors

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related