Babel / Typescript aliases not working properly

I have a Typescript environment which i compile using Gulp, tsify, browserify and babelify. I have successfully configured aliases to navigate the project better.

I am trying to import a node module, lets say query-string, into component.ts by doing this:

import * as querystring from 'query-string';

The traceResolution option of tsconfig.json shows me this:

Module name 'query-string' was successfully resolved to '/node_modules/query-string/index.js'

But I'm still getting an error in the console saying:

Error: Cannot find module 'query-string' from '/components/example-component/'

Imagine the project structure like this:

/ |-- node_modules/ | |-- ts/ |    |-- app.ts //this is the main file, it imports component.ts | |-- components/ |    |-- example-component/ |        |-- component.html |        |-- component.ts //attempting to import a node module here | |-- gulpfile.js |-- tsconfig.json |-- .babelrc |-- package.json 

My tsconfig.json file looks like this:

{   "compilerOptions": {     "noImplicitAny": false,     "target": "es2015",     "sourceMap": true,     "baseUrl": "./ts",     "traceResolution": true,     "paths": {       "@components/*": ["../components/*"],       "*": ["../node_modules/*"]     }   } } 

My .babelrc looks like this:

{   "presets": ["es2015"],   "plugins": [     ["module-resolver", {       "cwd": "babelrc",       "root": ["./ts"],       "alias": {         "@components": "./components"       }     }]   ] } 

Here is what actually does work:

1. importing .ts files using relative paths
2. importing .ts files using aliases (eg. import '@component/example-component/component.ts')
3. importing a node module into app.ts

2 Answers

Answers 1

Successfully locating a module's entry point, which is what is correctly happening based on the traceResolution message you provided, is a separate problem from understanding that module.

For TypeScript to understand the module it needs to find a typings file (.d.ts) that describes the module's types.

Looking at the query-string repo, it does not ship with a .d.ts file included, so you will need to pull it in from elsewhere.

It does, however, appear that the typings for query-string are available in the Definitely Typed repo, meaning that you should be able to run npm install --save-dev @types/query-string and the typings will be added to your project.

Answers 2

its not hard use this (I copied it from somewhere else):

Successfully locating a module's entry point, which is what is correctly happening based on the traceResolution message you provided, is a separate problem from understanding that module.

For TypeScript to understand the module it needs to find a typings file (.d.ts) that describes the module's types.

Looking at the query-string repo, it does not ship with a .d.ts file included, so you will need to pull it in from elsewhere.

It does, however, appear that the typings for query-string are available in the Definitely Typed repo, meaning that you should be able to run npm install --save-dev @types/query-string and the typings will be added to your project.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati