CODEWITHSUNDEEP
reactjstypescriptwebpack
Rick
Rick

Reputation: 8846

Simplest Typescript + React + WebPack example generates errors

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
}

Upvotes: 4

Views: 513

Answers (2)

Rick
Rick

Reputation: 8846

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

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 16710

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

Upvotes: 0

Related Questions