4

I have installed the popular d3 library through NPM.

npm install d3
tsd install d3 -save
tsc

In my home.ts file, I have imported the module:

import * as d3 from 'd3/d3';

This compiles correctly, but I get this semantic error:

app/home/components/home.ts(2,21): error TS2307: Cannot find module 'd3/d3'.

Also, I lose all of my syntax highlighting/type-ahead info in my IDE.

The original d3.d.ts file provided by TSD declares the module like so:

declare module 'd3' {
    export = d3;
}

If I change the module to 'd3/d3', everything works fine:

declare module 'd3/d3' {
    export = d3;
}

So, I'm having a hard time getting both of what I need:

import * as d3 from 'd3'; gives me the type definitions I expect, but looks for a module in node_modules/d3.js which is incorrect.

import * as d3 from 'd3/d3'; finds the correct module because the path is right, but i lose my type definitions because the module declaration doesn't match.

How can I get these two things to match up so I can simply import the module without losing my type definitions?

FYI: I am using typescript 1.7.5, and my moduleResolution is set to node.

JMac
  • 1,726
  • 3
  • 14
  • 30
  • Are you sure that Node will try to load `node_modules/d3.js`? I tried it on my end and it currently works both with TypeScript loading the correct typings and Node loading `node_modules/d3/d3.js`. – Daniel Rosenwasser Jan 25 '16 at 23:26
  • Did you ever get his resolved @JMac? I'm running into this exact issue tonight. – Jesse Feb 03 '16 at 03:45
  • I did not...I ended up writing a hacky `declare` statement to get things to work, but it definitely isn't ideal or a real solution. – JMac Feb 03 '16 at 04:15
  • I'm running into the same problem, any solution 6 weeks later? :) – Christopher Grigg Mar 15 '16 at 06:04
  • I have no idea how you find out that both `import` and `declare` should refer `d3/d3`, but that definitely saved me a couple of hours. Thanks for posting this! – user3707125 Jun 08 '16 at 16:17

1 Answers1

0

You need to tell the loader where to look for things. In your systemjs.config.js, add the following mapping in the map object: 

var map= {
...
...
'd3':  'node_modules/d3'
};

The d3.js file is indeed located in node_modules/d3 and the above mapping will let the loader find the file. Now, you can import it in your components as: 

import * as d3 from 'd3';
Cerny
  • 305
  • 1
  • 4