how to define require function in typescript

Question

this is my ts code:

import AddToCartBtn from "./AddToCartBtn";
import * as React from "react";
import * as ReactDOM from "react-dom";

declare var document:Document;
var _handler : __React.MouseEventHandler;

ReactDOM.render(<AddToCartBtn clickHandler={_handler}></AddToCartBtn>, document.getElementById("bd"));

and compile to js like:

define(["require", "exports", "./AddToCartBtn", "react", "react-dom"], function (require, exports, AddToCartBtn_1, React, ReactDOM) {
    var _handler;
    ReactDOM.render(React.createElement(AddToCartBtn_1.default, {"clickHandler": _handler}), document.getElementById("bd"));
});

it is a define function and doesn't work. how do I get a require function?

{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "amd", "removeComments": false, "sourceMap": true, "jsx": "react" } } — Zhaowei
– Zhaowei, Commented Nov 30, 2015 at 22:10

Nypan · Accepted Answer · 2015-11-30 21:31:28Z

1

You are compiling with --module (or -m) set to amd. You should probably use commonjs.

answered Nov 30, 2015 at 21:31

Nypan

7,2463 gold badges24 silver badges28 bronze badges

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

Comments

mejdev · Accepted Answer · 2015-11-30 21:32:12Z

0

The define function is expected. You need require defined in the global scope for it to work though. Depending on your setup, there are various ways of making this happen. I have always used the approach listed below:

Typically this could be done by importing require via a script tag in your html (given usage of react, I'm assuming you are targeting the browser). This assumes your ts file compiles to main.js. This example is directly from RequireJS docs

<script data-main="main" src="require.js"></script>

Another option is to call require in a different script tag following that:

<script src="require.js"></script>
<script>
    require(["main"]);
</script>

answered Nov 30, 2015 at 21:32

mejdev

3,7584 gold badges26 silver badges41 bronze badges

Comments

FlorianTopf · Accepted Answer · 2015-11-30 22:25:07Z

0

Just switch your tsconfig.json settings to this:

{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "commonjs", "removeComments": false, "sourceMap": true, "jsx": "react" } }

Then you will have set the module system to commonjs which is the default module system for typescript.

answered Nov 30, 2015 at 22:25

FlorianTopf

9487 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to define require function in typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related