Typescript cannot find local es6 module; error TS2307: Cannot find module

Question

I am having a hard time getting typescript to recognize the shape of a local es6 module:

convert-time.js

export const minutes = sec => sec * 60
export const hours = sec => minutes(sec) * 60
export const days = sec => hours(sec) * 24
export const weeks = sec => days(sec) * 24
export const years = sec => days(sec) * 365

Note: I would like to figure out how to get this to work without just changing convert-time.js to a typescript file.

Here is the file I am trying to import it into:

index.ts

/// <reference path="../typings/convert-time.d.ts" />

import { minutes, days } from '../test/helpers/convert-time'

Here is the type definition file I created:

convert-time.d.ts:

declare module "convert-time" {
  export function minutes(sec: number): number;
  export function hours(sec: number): number;
  export function days(sec: number): number;
  export function weeks(sec: number): number;
  export function years(sec: number): number;
}

And here is my tsconfig:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "jsx": "react"
  },
  "files": [
    "typings/index.d.ts",
    "typings/convert-time.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Steps tried:

Searched StackOverflow for error TS2307: Cannot find module. Most questions are regarding external modules which have type definitions. I couldn't find an example of a local module.
Read https://www.typescriptlang.org/docs/handbook/modules.html
Read https://www.typescriptlang.org/docs/handbook/module-resolution.html
Added typings/convert-time.d.ts to the files section in tsconfig.json.
Added /// <reference path='../../typings/convert-time.d.ts' /> to index.ts

None of the above worked! What dark magic must I learn to get this to work? Thanks!

In your compilerOptions you need to have allowJs: true to allow for JavaScript files otherwise it will thow an error. — Get Off My Lawn
– Get Off My Lawn, Commented Jul 12, 2017 at 2:25
I had this problem. The allowJs: true solved the issue for me — rustyBucketBay
– rustyBucketBay, Commented Aug 15, 2020 at 16:29

Cray · Accepted Answer · 2020-07-10 07:21:34Z

6

Regarding ES6

Since you are trying to inter-operate with an ES6 module you will either"

a) Change your tsconfig.json to target ES6 and emit ES6 modules like this:

{
  ...
  "target": "es6",
  "module": "es6",
  ...
}

However I don't think you can use ES6 modules yet in NodeJS.

or:

b) Let TypeScript transpile the ES6 JavaScript module down to ES5 by enabling JavaScript processing in your tsconfig.json under compilerOptions - like the below and making sure that the .js file is included/not excluded:

{
  ...
  "target": "es5",
  "module": "commonjs",
  "allowJs": true,
  ...
}

Regarding your Type Declarations

Have a read at my blog on how TypeScript discovers typings/type declarations and what it expects to see here: https://ivanz.com/2016/06/07/how-does-typescript-discover-type-declarations-definitions-javascript

It appears that this JavaScript file is your own code (not an NPM module), so:

You don't need the /// <reference path="../typings/convert-time.d.ts" /> as long as the file is not excluded or included in tsconfig.json
Ensure convert-time.d.ts is in the same directory as convert-time.js
You don't need to declare a module, so remove the declare module "convert-time" { bit. This is because by having the .d.ts next to the .js it's an "external" module rather than "ambient' (see my blog) (you will need the declare bit if e.g. you were creating typings which are living in your own code for a NPM package)

Basically:

../test/helpers/convert-time.js:

export const minutes = sec => sec * 60
export const hours = sec => minutes(sec) * 60
export const days = sec => hours(sec) * 24
export const weeks = sec => days(sec) * 24
export const years = sec => days(sec) * 365

../test/helpers/convert-time.ts.d:

export function minutes(sec: number): number;
export function hours(sec: number): number;
export function days(sec: number): number;
export function weeks(sec: number): number;
export function years(sec: number): number;

index.ts:

import { minutes, days } from '../test/helpers/convert-time';

tsconfig.json (for ES5 transpiling)

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "jsx": "react"
  },
  "files": [
    "/test/helpers/convert-time.ts.d",
    "/test/helpers/convert-time.js",
    "index.ts"
  ]
}

edited Jul 10, 2020 at 7:21

Cray

2,8468 gold badges25 silver badges34 bronze badges

answered Jun 8, 2016 at 21:50

Ivan Zlatev

13.3k9 gold badges45 silver badges51 bronze badges

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

6 Comments

Raine Revere Over a year ago

Thank you, Ivan, for the thorough explanation! This did help me understand better how typescript searches for type definitions. I got rid of all of the ambient definitions and references. The build step completes successfully now, but unfortunately at runtime I get "Unexpected token export". Any ideas?

Ivan Zlatev Over a year ago

@Raine Where is the error coming from and what is the code?

Raine Revere Over a year ago

The code is exactly as you specified. The error occurs in convert-time.js when the server starts, at run-time. It looks like an extra transpilation step is needed somewhere to convert these into commonjs modules?

Jamie Birch Over a year ago

Note: at the start of step B, commondjs should instead be written as commonjs.

Ivan Zlatev Over a year ago

@JamieBirch Good spot! Fixed the typo.

|

Collectives™ on Stack Overflow

Typescript cannot find local es6 module; error TS2307: Cannot find module

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related