1

So I'm getting started on a project using the react template for a .NET Core MVC WebApp and I'm having some trouble with absolute imports. As far as I understand it, I can set baseUrl in my .tsconfig and that should be the end of it. While this works like a charm in VS Code I cannot seem to get it working in VS 2019.

Here is my basic file/folder structure:

--src
  --Context
    Context.ts
  --App
    App.tsx

When I try import * as Context from 'Context/Context' from App.tsx:

VS2019 gives me the following error: (TS) Cannot find module

However, when I open up the same project/files in VS Code it works as expected.

Could someone please explain to me how I can get the behaviour of VS Code in VS2019 and/or why VS2019 doesn't work the way I'm expecting it to?

Improve this question
6
  • Years ago when VS code first came out I used VS for everything. I found when I tried to build UI projects in VS it was a problem. VS code makes things way easier. Is there a specific reason why you would want to use VS over code? Commented Dec 31, 2019 at 15:49
  • I'm migrating an existing project built using old versions of .net and react which has a large amount of backend code that vastly outweighs the frontend. Besides, it's not really my decision, it's a work project and this is what the dev team is using. Commented Dec 31, 2019 at 16:11
  • What's stopping you from working on the UI in VS code and ignoring the issue in VS? At the end of the day it's just a folder structure and you could edit it in notepad if you wanted to. Commented Dec 31, 2019 at 16:13
  • I guess nothing other than the additional complexity, it seems a bit of a pain to need multiple IDEs to work on one project, as well as I don't really like the idea of just ignoring the issue in VS. Commented Dec 31, 2019 at 16:51
  • I feel your pain. I've worked on .Net projects for years and it's just become natural to work on C# code in VS and JS in VS code. I think of VS as my .Net compiler whereas VS code is my JS compiler. Hopefully you'll get a good answer to your problem. Commented Dec 31, 2019 at 16:54

1 Answer 1

Reset to default
2

I've managed to find what I think to be the solution to this issue. I've been looking through the settings for both VS 2019 and VS Code to see if I could find any blatant mismatches and I came across a setting for Module Specifier Preference [VS 2019] / Import Module Specifier [VS Code] that had very similar options.

In VS Code this was set to "Auto" however in VS 2019 it was set to "Always use relative paths".

I updated this in VS 2019 to "Automatically determine best import path", restarted VS and voila! I'm now able to use absolute path imports for my typescript files.

Since changing this setting I still get IntelliSense errors in the error list window about not being able to find a module when using an absolute import path but this doesn't appear in the editor and I'm able to successfully build and deploy.

The Solution

Go to Options > Text Editor > JavaScript/TypeScript > Formatting > General. Set Module Specifier Preference (TS 2.9 or later) to Automatically determine best import path. Lastly Restart Visual Studio

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

1 Comment

I'm glad you were able to find a solution to your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.