ReactJS with Typescript - Can't find variable: 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:

Luka Jacobowitz · Accepted Answer · 2016-03-15 21:49:21Z

3

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.

answered Mar 15, 2016 at 21:49

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

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

2 Comments

JaSHin Over a year ago

Can I use NodeJS only for "module rendering" and Apache/Php as server api?

Luka Jacobowitz Over a year ago

No, use Browserify! It will bundle all your code and all your imports into a single .js file.

basarat · Accepted Answer · 2016-03-15 23:19:19Z

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

answered Mar 15, 2016 at 23:19

basarat

278k60 gold badges475 silver badges528 bronze badges

Collectives™ on Stack Overflow

ReactJS with Typescript - Can't find variable: require

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related