Typescript: [Bug] TS doesn't detect webpack aliases?

[dbaeumer]

_From @Luchillo on July 13, 2016 19:20_

• VSCode Version: 1.3.1
• OS Version: Ubuntu 15.10

Steps to Reproduce:

I have a webpack config with an alias for an import path, VSCode doesn't recognize this, i've tried with
the tsconfig.json's paths option:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "paths": {
    "tao-animations": "app/theme/core/app.tao-animations.ts"
  },
  "compileOnSave": true,
  "atom": {
    "rewriteTsconfig": false
  }
}

But it still doesn't find the module even if webpack compiles ok:

_Copied from original issue: Microsoft/vscode#9227_

[dbaeumer]

_From @egamma on July 14, 2016 8:55_

@Luchillo I'm pretty sure the error message doesn't come from tslint. You can verify this by hovering over the error message. Error messages from tslint are prefixed with tslint.

Your tsconfig.json appears to be using features that are either specifc to atom typescript or are not yet supported in TS 1.8 (the version that is bundled with vscode). Files globbing will come in TS 2.0.

[dbaeumer]

_From @Luchillo on July 14, 2016 10:19_

The error mesage says ts so i guess it is the ts version, is there a way to tell ts to map or alias a file path just like i do in webpack?

[kitsonk]

This should work when using TS2.0 (paths is not supported with 1.8 and the specific addition of paths was to support this use case with WebPack and other loaders the are re-mappable).

No need to move it over to the TypeScript repo.

[luchillo17]

I've updated to TS2 but the VSCode project still shows the error, could it be that vscode uses it's own ts version aside of the one installed global with npm?

[kitsonk]

You have to configure you project to use a different version of tsc. For example in .vscode/settings.json:

{
    "typescript.tsdk": "/local/path/to/different/version/of/typescript/lib/"
}

[luchillo17]

Done, installed typescript 2.0.0 and added this to my settings.json:

// Place your settings in this file to overwrite default and user settings.
{
  "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
}

However the error still shows.

Here's the package.json of that typescript folder:

$ cat /usr/local/lib/node_modules/typescript/package.json 
{
  ...
  "license": "Apache-2.0",
  "main": "./lib/typescript.js",
  "maintainers": [ ... ],
  "name": "typescript",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Microsoft/TypeScript.git"
  },
  "scripts": { ... },
  "typings": "./lib/typescript.d.ts",
  "version": "2.0.0"
}

[basarat]

Done, installed typescript 2.0.0 and added this to my settings.json:

Thats fine. But you can also install it (and share it) with other users put just putting typescirpt@next in your project : https://basarat.gitbooks.io/typescript/content/docs/getting-started.html#typescript-version :rose:

[luchillo17]

That would be great, ... except i don't open the project, i open the project parent to have access to a few other projects, be it because they're related or because there's some interesting examples in that parent folder.

Also note i said that even after installing ts v2.0.0 and linking in settings.json i still see the error mentioned.

[luchillo17]

@basarat The TS V2.0 isn't working for me, even after telling the vscode config to use that ts version, wasn't V2.0 supposed to have the feature to fix this or am i doing something wrong?

[luchillo17]

Testing with typescript@next, currently version is 2.1.0-dev.20160809, however even with the paths mapping it still doesn't work.

[s-panferov]

@Luchillo you need to write paths inside compilerOptions section

[s-panferov]

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "tao-animations": [ "app/theme/core/app.tao-animations.ts" ]
    },

[luchillo17]

Done, same result:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "paths": {
      "app.tao-animations": [
        "app/theme/core/app.tao-animations.ts"
      ],
      "app.tao-animations.ts": [
        "app/theme/core/app.tao-animations.ts"
      ]
    }
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "baseUrl": "./app",
  "compileOnSave": true,
  "atom": {
    "rewriteTsconfig": false
  }
}

[luchillo17]

Just to confirm it is a relative path from the tsconfig.json file, right?

[luchillo17]

Ok now it works, what happened was i had the baseUrl property outside the compiler options, i think moving it to that section was the fix.

[luchillo17]

This issue is fixed, however since it's a copy of the issue in the other repo i can't close it, @dbaeumer or the repo admins can close this now.

[egamma]

closing as requested

[luchillo17]

Weird thing is i have now replaced 4 aliases for other paths, but that one about app.tao-animations still needs the Webpack alias, why other folders with Barrels that contains a index.ts and module resolution Node work ok without a webpack alias but this specific one doesn't?

[xgz123]

Fix this by setting baseUrl & paths

~~~js
{
//...
{
baseUrl: "fe/js"
}

"paths": {
some: relativePath
}
}
~~~

[paulthomas75]

For me I noticed the issue only affecting spec files. Changed my tsconfig.spec.ts module: commonjs to es2015. Bingo.

[marquizzo]

I had to duplicate the aliases from webpack.config.js to tsconfig.json.

For instance, if your webpack.config.js looks like this:

resolve: {
    alias: {
        'utils': path.join(ROOT_DIR, '/src/utils'),
        '~': path.join(ROOT_DIR, '/src/app')
    },
    // ...
},

...then you have to also tell TypeScript to expect the same aliases, so your tsconfig.json should include:

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "utils": "/src/utils",
        "~": "/src/app"
    }
},

Just make sure ROOT_DIR and baseUrl both start from the same folder!

[tsauvajon]

I have a similar problem with webpack module resolution.

Here's the webpack config:

resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.gql', '.graphql'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

and tsconfig.json

"baseUrl": "./",
    "paths": {
      "@": ["src"]
    },

In a .ts file, import HelloWorld from '@/components/HelloWorld' triggers a module not found problem on VSCode.
Changing it to import HelloWorld from '@/components/HelloWorld.vue' makes the error disappear.

How to add module extension resolution to tsconfig.json ?
I've not found anything related in the doc, nor in issues.