Stencil: Component Types File ignores tsconfig compilerOptions.paths

Created on 4 Sep 2018  路  5Comments  路  Source: ionic-team/stencil

Stencil version:

 @stencil/[email protected] 

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
My project uses the tsconfig.json compilerOptions.paths to allow imports from the src folder down

"paths": {
      "*": ["src/*"]
    }

which allows an import like components/ rather than ../../components

The generated component types file doesn't do anything to these imports, which means it can't be used as a library by another project because the imports don't resolve.

Expected behavior:

When the component types file is generated, it re-writes paths in the same way as the pathsResolver function used as a rollup plugin.

Steps to reproduce:

  1. tsconfig.json as above
  2. Make a component with a @Prop that uses a type imported with a non-relative reference.
    e.g.
import { DataType } from 'model/data-type' 
...
@Prop data: DataType
  1. view generated components / generated.d.ts
bug

Most helpful comment

Here you go: https://github.com/tomsaunders/stencil-tsconfig-repro

I found a thing with sass imports as well so that's also reproduced.

All 5 comments

Could you create a simple repo based on https://github.com/ionic-team/stencil-component-starter to show the issue? Thank you!

Here you go: https://github.com/tomsaunders/stencil-tsconfig-repro

I found a thing with sass imports as well so that's also reproduced.

Not sure if this is the same thing @tomsaunders but I use the alias plugin like so:

tsconfig.json (abbreviated version)

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

stencil.config.ts

import { Config } from '@stencil/core'
import alias from 'rollup-plugin-alias'

export const config: Config = {
  // other stuff
  plugins: [
    alias({
      '@': 'src'
    })
  ]
}

some-component.ts

import { ISomething } from '@/foo/bar'

Works great, VSCode even uses the @ when auto importing 馃榿

how about this issue now?

Should be fixed in most recent versions

Was this page helpful?
0 / 5 - 0 ratings

Related issues

guidoknoll picture guidoknoll  路  3Comments

karsvaniersel picture karsvaniersel  路  3Comments

glemiere picture glemiere  路  3Comments

mitchellsimoens picture mitchellsimoens  路  3Comments

MrMcGibblets picture MrMcGibblets  路  3Comments