Quokka does not respect tsconfig "paths" option

[lemonmade]

Issue description or question

Loving Quokka so far. I expected that I would be able to import from within my project and it works great overall, except that it does not seem to pick up my paths option in tsconfig.json that I use to rewrite some import paths to a custom packages directory inside of my project. I tried a variety of setups (with and without ts-node installed, with and without a custom quokka config in my root package.json that duplicated my tsconfig.json), but couldn't seem to get that path resolution to work.

Code editor version

Visual Studio Code v1.10.2

OS name and version

macOS 10.12.3

[ArtemGovorov]

Could you please create a sample demonstrating the issue, we're happy to have a look.

[Knaackee]

Same here. I use "experimentalDecorators": true in my tsconfig.json.
I can use decorators in my project but not in a quokka "session".

Looks like Quokka does not use the tsconfig.json of my project.

[ArtemGovorov]

@Knaackee Please create a sample demonstrating the issue. I have created this basic sample with decorators and it's working as expected both in quokka file and in the project's module.

[lemonmade]

Hey @ArtemGovorov. Here's an example repo showing my particular problem: https://github.com/lemonmade/quokka-paths-example. If you try to create a new TypeScript file with quokka and write, for instance:

import myPackage from 'my-package';
import app from 'app';

Neither of those imports is able to resolve, despite the fact that the paths configuration in TypeScript should allow them to resolve correctly (and, in app/index.ts, you can see that a default import from my-package does in fact resolve).

Let me know if I can provide any more details or if I made any obvious mistakes.

[ArtemGovorov]

@lemonmade Thanks for the sample.

TypeScript doesn't do any changes to the paths in the code, so when node runs the code it can't find the modules, and it makes sense.

I have done a bit of research, and it looks like ts-node itself doesn't support it. However, there's the tsconfig-paths module that solves the issue.

I have added the note to our docs: if you are using paths in your tsconfig.json file, you will need install npm install tsconfig-paths to the same location where you have installed ts-node. So you may install both ts-node and tsconfig-paths into your project’s folder or in the quokka global config folder.

Note that you'll also need to update to the latest v1.0.11 of the extension to make it work.

[lemonmade]

Thanks for looking into this! We're you able to get my example repo working with that setup? I updated my version of the extension and installed the latest versions of both packages but still no dice. Is there a particular quokka config that's needed in order to use that version of TS-node and the require hook?

[ArtemGovorov]

Yes, I was able to get your example to work. All I did was what I have mentioned:

npm install tsconfig-paths ts-node typescript

(you may do it in the project or in the quokka global folder)
and this simple quokka is working for me:

[ArtemGovorov]

Is there a particular quokka config that's needed in order to use that version of TS-node and the require hook?

Nope, just the mentioned node modules. If it doesn't work for you, please paste the error you're getting from quokka console.

[lemonmade]

Ah, thanks @ArtemGovorov. I expected that since it was showing errors, it was not working, but you are right that everything resolves correctly. It is unfortunate that it shows errors for the import path/ decorators/ doesn't allow command-click-to-definition like it would in a normal project file, though.

[ArtemGovorov]

@lemonmade It's because there's no physical file, so VS Code doesn't seem to be willing to apply the tsconfig.json when analyzing it. But if you save it as a real file, it's all working:

[dadiborn]

Is there any example where extended tsconfig used?
Can't fully make Quokka work with soft paths like '@Example/: "example/src/".
It works if I have one general tsconfig but not working with general + extended tsconfigs:
-shared folder with MyFunc or any ts to import
-indexRoot.ts with working import of import {MyFunc} from '@first/MyFunc';
-tsconfig.json (root) >>

// root tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@first/*": ["shared/*"]
    }
  }
}

-Packages
--LevelDown
--indexLevelDown.ts with import of import {MyFunc} from '@second/MyFunc';
--tsconfig.json (sub) >>

// tsconfig.json inside SubProject
{
  "extends": "../tsconfig.json",
  "include": ["."],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@second/*": ["../shared/*"]
    }
  }
}

It will Pass on indexRoot but
It will Fail on indexLevelDown with:
Install "@second/MyFunc" package for the current quokka file
Install "@second/MyFunc" package into the project
Cannot find module '@second/MyFunc'

Im sure 99% there is example for that but due repo names you are making like quokka/wallaby-1234 it is not possible to find.

So ether it is a bug ether my fail in configuration, I have no ideas and working example needed.

[smcenlly]

@dadiborn - currently Quokka runs your TypeScript files from your project root, and this is by design. So if have a project open that has sub-packages, the tsconfig.json file that will be used is the file that exists in the project root, not the one that exists in the sub-package folder.

I have created a feature request to support your scenario. We will likely get a chance to review viability of implementing the feature and consider scheduling in the next week or two.

[dadiborn]

@dadiborn - currently Quokka runs your TypeScript files from your project root, and this is by design. So if have a project open that has sub-packages, the tsconfig.json file that will be used is the file that exists in the project root, not the one that exists in the sub-package folder.

I have created a feature request to support your scenario. We will likely get a chance to review viability of implementing the feature and consider scheduling in the next week or two.

Thank you for reply, If I have missed that information in docs, that was fun hours of searching for solution :) if not please add a note about this limitation into documentation. Thank you