typescript can't resolve non-relative path in import

Question

I have project structure like this

|--src
     |--app.component
                    |--index.ts
     |--home.component
                    |--index.ts
|--tsconfig.json
|--webpack.config.js

And I'm trying to do stuff below in app.component-index.ts

import { HomeComponent } from 'components/home.component'

Typescript couldn't find this module and throws

error TS2307: Cannot find module 'home.component'

Typescript docs say next:

A non-relative import to moduleB such as import { b } from "moduleB", in a source file /root/src/folder/A.ts, would result in attempting the following locations for locating "moduleB":

/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts

So for my case I expect it would be like

/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component

Thanks in advance. P.S. In my webpack.config I've setted root.resolve to src and everything bundles correct. Typescript-loader prints errors to terminal but everything is bundled and works correctly

components/home.component doesn't look like a non-relative import. you tell it to fetch home.component, but that's a directory, not a module. — Ozrix
– Ozrix, Commented Apr 27, 2016 at 21:03
@Ozrix hmm.. But if I change it to simple 'home.component' it wouldn't work for me. It is strange but components/home.component have been worked just fine few days ago when src folder was named like client — Mike Yermolayev
– Mike Yermolayev, Commented Apr 27, 2016 at 21:09
You don't just need to prefix the path with './'? eg. import { HomeComponent } from './components/home.component'? — Matt Searles
– Matt Searles, Commented Apr 28, 2016 at 7:13
@MattSearles It wouldn't solve the problem. If I'd do that then path become relative. I can do this with relatives paths but I want to know why it doesn't work — Mike Yermolayev
– Mike Yermolayev, Commented Apr 28, 2016 at 20:13

Shane Wright · Accepted Answer · 2017-02-27 23:36:45Z

2

So I can guess at the "why" portion of this but I'm relatively new to TypeScript. I have gotten this to work though so I'll try explaining based on that solution as best I can.

What you expect based on the TypeScript Docs would be mostly correct if:

'components/home.component'

were treated as a 'Non-relative import'. I'm fairly certain (based on the solution that worked for me) that TypeScript treats it as an absolute path from the 'compilerOptions.baseUrl' field in your tsconfig.json.

What worked for me was to set it like so:

{
  "compilerOptions": {
    "baseUrl": ".",

    // Other options
  }
}

Which essentially tells TypeScript to try and find something like

'components/home.component'

by looking in the same directory as the tsconfig.json file for a directory called 'components' and then to look for a file/directory within it called 'home.component'.

So if your structure looks like:

|--src
   |--app.component
       |--index.ts
   |--home.component
       |--index.ts
|--tsconfig.json
|--webpack.config.js

And you set baseUrl to "." you would probably need to format your import like

import { HomeComponent } from 'src/home.component'

answered Feb 27, 2017 at 23:36

Shane Wright

362 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jenkizenki Over a year ago

thanks for this. I was able to use "baseUrl": "src/" for mine

Collectives™ on Stack Overflow

typescript can't resolve non-relative path in import

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related