CODEWITHSUNDEEP
typescriptrequirejsamd
JamesFaix
JamesFaix

Reputation: 8655

TypeScript with requirejs cannot find module error

I am migrating a JavaScript project to TypeScript. The existing JavaScript uses requirejs for module loading, and I would like to do the same in TypeScript.

I have one module that is throwing "cannot find module" errors from its import statements when I compile. I have the correct <reference/> tags, and the references modules will work at runtime as expected. However, I would like to get these erroneous compiler errors out of my Error List window.

Here is the basic file structure of this module and its references:

root/
    helper.ts
    ui/
       uiModule.ts //This module is throwing the error
       panels/
           panel1.ts //The import of this module throws the error

The top of uiModule looks like this:

///<reference path="../helper.ts"/>
///<reference path="panels/panel1.ts"/>

import helper = require("Helper");
import panel1 = require("Panel1");

All of the modules are setup as single classes, like this:

//references and imports...
class MyClass {
    //Methods...
}

export = MyClass;

All filenames and import aliases start with lowercase; all class names start with uppercase.

The "cannot find module" errors seem to only be happening when one module references another in a deeper folder. If I change the import statement to `require("Panels/panel1"), the compiler error goes away, but it fails at runtime.

How can I correctly make this error stop showing up? I have a config file for requirejs. Can I point the language service to that file to resolve module references? I would really like to decouple references from file paths at design time as much as possible.

Upvotes: 1

Views: 1972

Answers (2)

GeniusCodeMonkey
GeniusCodeMonkey

Reputation: 1

Don't use relative paths i.e.

"../../helper".

Always use absolute paths from your project folder i.e. "app/components/Helper"

Also don't put a / in front of the filepath as that can cause issues.

Don't use //references, use 

import { myClass } from 'app/components/Helper';

This will also help requirejs find class references easier when bundling the js.

Vlad is also correct, just change your class definition too...

export class Helper {
    [...]
}

you don't need the export = Helper statement at the end of your file.

Upvotes: -1

Vlad Jerca
Vlad Jerca

Reputation: 2224

So first of all, for the class definitions, you can update them to look like so.

export class MyClass {
    // TO-DO
}

As for the require statements, it's normal for the compiler to tell you they are cannot be found.

So given your file structure your imports should look like this:

import helper = require("../helper");
import panel1 = require("./panels/panel1");

or

// remember you can have a file with multiple exported objects
// or and 'index.ts' file inside a folder which exports multiple files
// by using the import syntax you can choose what to import from that module

import { helper } from '../helper';
import { panel1 } from './panels/panel1';

this should solve your current issues.

Example project I'm working on with TS for help:

https://github.com/vladjerca/imgstry/tree/feature/typescript_port

More on the subject:

https://www.typescriptlang.org/docs/handbook/modules.html

Upvotes: 2

Related Questions