How to reference TypeScript files without running into 'require is not defined' error

Question

I'll preface by saying I don't have advanced knowledge of TypeScript or JavaScript.

What I did

I'm making a barebones TypeScript "algorithmic toy-box" that implements algorithms from Fundamentals of Algorithmics (Brassard and Bratley). What I do is open a local HTML file and the transpiled TypeScript modifies the DOM to show the output (just like the Greeter example on the TypeScript webpage).

Everything was going fine until I decided to use separate files for each class. I used one of the many ways available to reference TypeScript files, but I'm not sure if it was the best suited. I also created a default tsconfig.json file with the Atom TypeScript plugin thinking that the compiler would now assume all .ts in the directory are the same module or something, but I guess that wasn't the case.

main.ts:

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

let arr5_13 = [1,6,9,2,7,5,2,7,4,10]
let mon1 = new Monticulo(arr5_13)
// ...

document.body.innerHTML = mon1.console_debug

The problem

When I open the HTML file on a browser, the console says Uncaught ReferenceError: require is not defined.

Sure enough, the transpiled code has a require() call:

main.js:

var monticulo_ts_1 = require("./stuff/monticulo.ts");
var arr5_13 = [1, 6, 9, 2, 7, 5, 2, 7, 4, 10];
// ...

document.body.innerHTML = mon1.console_debug;

What I've tried

I initially ran it on Firefox 47.0, then I tried running in Chromium 51.0 (in case it was browser related) but I got the same error. I'm on Ubuntu 16.04 for the sake of completeness.

I've read that require() is a function that is not implemented client-side, yet Node has it implemented and it's needed for using npm modules in-browser, but why would TypeScript need to call any npm module? Why doesn't main.js just reference the transpiled .js instead of the .ts itself? I'm pretty sure I'm missing one or more pieces of information.

AlexG · Accepted Answer · 2016-07-22 16:59:42Z

3

You are probably compiling down to the commonJS module format (check your tsconfig.json)

That means it generates require function calls for you and it is your responsibility to provide a commonjs loader. You also probably want to bundle all your files into one. It just so happens that webpack does both and is very often used together with typescript :)

edited Jul 22, 2016 at 16:59

answered Jul 22, 2016 at 16:36

AlexG

4,1151 gold badge26 silver badges19 bronze badges

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

3 Comments

JoseHdez_2 Over a year ago

As you said, the tsconfig.json is set to the commonJS format. I'll look into using webpack or checking out the other module formats, since I'm still unclear on whether using webpack is necessary for this case (this is just some small local html+js thing). Thanks!

JoseHdez_2 Over a year ago

I just found out that my question is basically a repeat of another, 3-month old question where the author explained themselves much more clearly than me and got a similar answer... I guess I'll go with webpack then.

AlexG Over a year ago

if you have like 3 files, it may seems overkill indeed. You could compile an entire folder with tsc, then use some kind of concatenation tool that will put the files in the order you specify it. There is a huge disadvantage to this solution though: it doesn't scale. webpack figures out the dependencies of every modules and is not too difficult to setup :)

Brant Olsen · Accepted Answer · 2017-11-01 14:16:40Z

1

You can remove the need for require by replacing

import { Monticulo } from "./stuff/monticulo.ts"
import { ProgDin } from "./programacion-dinamica.ts"

with

/// <reference path="./stuff/monticulo.ts" />
/// <reference path="./programacion-dinamica.ts" />

See Triple Slashes for more info on using the triple slash imports.

You will also want to remove all export class and replace with just public class.

edited Nov 1, 2017 at 14:16

answered Oct 10, 2017 at 21:08

Brant Olsen

5,6645 gold badges39 silver badges53 bronze badges

3 Comments

Toast Over a year ago

This doesn't work if the referenced file contains an export statement.

Brant Olsen Over a year ago

You would not use exports with the triple slash. You only use exports with the import way of including files. I will add a comment to indicate that.

Toast Over a year ago

You're right. My point is, you can't use triple slashes if you reference any library in your project.

Trae Zeeofor · Accepted Answer · 2023-09-07 06:35:31Z

0

I'm just learning Typescript from Scrimba. But I didn't want to use their web based IDE tool, so I setup a compiler extension to help transpile my Typescript into Javascript, and I'm having exactly the same experience with you: "Everything was going fine until I decided to use separate files for each class".

The transpiled Javascript throwing up "ReferenceError: require is not defined" when trying to import functions from the other file.

To keep the focus on learning I ended up writing all functions etc in a single file. So no need to export/import. Problem solved!

answered Sep 7, 2023 at 6:35

Trae Zeeofor

668 bronze badges

Collectives™ on Stack Overflow

How to reference TypeScript files without running into 'require is not defined' error

What I did

The problem

What I've tried

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I did

The problem

What I've tried

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related