ReactJS with Typescript - 找不到变量：require

Question

Good day,

I am trying use ReactJS with Typescript. Everything looks good, but after starting the application error occurs: "Can't find variable: require"

I not use node.js for server side rendering.

Script:

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

import * as React from 'react'
import * as ReactDom from 'react-dom'

interface Props {}
interface State {}

export class App extends React.Component<Props, State>{

    render(){
      return (<div>Hello</div>);
    }
}

ReactDom.render(<App/>, document.getElementById("content"));

and this compiled boot.js:

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var ReactDom = require('react-dom');
var App = (function (_super) {
    __extends(App, _super);
    function App() {
        _super.apply(this, arguments);
    }
    App.prototype.render = function () {
        return (React.createElement("div", null, "Ahoj"));
    };
    return App;
}(React.Component));
exports.App = App;
ReactDom.render(React.createElement(App, null), document.getElementById("content"));

Error:

Answer 1

You're going to need module resolution. require is a form of loading a module into your code. It's usually used with NodeJS. If you want to use it in the browser, try Browserify.

Answer 2

require is not supported out of the box by browsers. You are going to need a module loader. I recommend webpack, here is a browser quickstart : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html