CODEWITHSUNDEEP
javascriptnode.jstypescriptgulpbabeljs
Zammy
Zammy

Reputation: 573

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

Upvotes: 4

Views: 1882

Answers (1)

casieber
casieber

Reputation: 7542

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.

Upvotes: 1

Related Questions