Typescript esm import with baseUrl

[BrettBedarf]

Issue description or question

Typescript esm absolute import from baseUrl module not found error. This is running quokka from an existing ts file

Sample code

// src/index.ts
import { foo } from 'foo.js'; // use js extension for esm compatibility

console.log(foo);  // Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'foo.js' imported from .../src/index.js 

tsconfig

{
	"compilerOptions": {
		"module": "es6",
		"target": "es6",
		"baseUrl": "./src", 
		"moduleResolution": "node",
          }
}

.quokka

{
   "stdEsm": false,
   "nativeEsm": true,
   "env": {
      "params": {
         "runner": "--experimental-specifier-resolution=node"
      }
   }
}

Quokka.js Console Output

​Install "foo.js" package for the current quokka file​
​Install "foo.js" package into the project​
 
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'foo.js' imported from .../.quokka/src/index.js 
    at new NodeError (node:internal/errors:371:5) 
    at packageResolve (node:internal/modules/esm/resolve:884:9) 
    at moduleResolve (node:internal/modules/esm/resolve:929:18) 
    at defaultResolve (node:internal/modules/esm/resolve:1044:11) 
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30) 
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40) 
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40) 
    at link (node:internal/modules/esm/module_job:75:36) 

Code editor version

Visual Studio Code v1.68.0

OS name and version

OSX

[smcenlly]

Can you please show us how this is working outside of Quokka?

We created a sample repo with the configuration that you provided.

If we try and run ts-node using ts-node --esm index we get this error:

TSError: ⨯ Unable to compile TypeScript:
index.ts:1:21 - error TS2307: Cannot find module 'foo.js' or its corresponding type declarations.

1 import { foo } from 'foo.js';
                      ~~~~~~~~

    at createTSError (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/index.ts:843:12)
    at reportTSError (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/index.ts:847:19)
    at getOutput (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/index.ts:1057:36)
    at Object.compile (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/index.ts:1411:41)
    at transformSource (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/esm.ts:400:37)
    at /Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/esm.ts:278:53
    at async addShortCircuitFlag (/Users/smcenlly/repos/temp/quokka-794/node_modules/ts-node/src/esm.ts:409:15)
    at async ESMLoader.load (node:internal/modules/esm/loader:407:20)
    at async ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:11)
    at async link (node:internal/modules/esm/module_job:70:21) {
  diagnosticCodes: [ 2307 ]

If we compile the TypeScript file and then try and run it with node, we get this error:

node:internal/errors:465
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'foo.js' imported from /Users/smcenlly/repos/temp/quokka-794/dist/index.js
    at new NodeError (node:internal/errors:372:5)
    at packageResolve (node:internal/modules/esm/resolve:954:9)
    at moduleResolve (node:internal/modules/esm/resolve:1003:20)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'

Please take a look at our repo and let us know what we need to do to get it working outside of Quokka (I'm assuming that our code/configuration isn't quite the same) and then we should be able to help.

[BrettBedarf]

Apologies, that has to do with the esm and me not including "paths" & tsconfig-paths/register in tsconfig to pair with the baseUrl. Making it simpler with commonjs, removing the ".js" extension and using this tsconfg works for ts-node src/index.ts but not in quokka.

repo

{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es6",
		"esModuleInterop": true,
		"outDir": "dist",
		"noImplicitAny": false,
		"sourceMap": false,
		"baseUrl": "./src",
		"paths": {
                    "*": ["./*"]
		}
	},
     "ts-node": {
        "require": ["tsconfig-paths/register"]
      }
}

// src/index.ts
import { foo } from 'foo';

console.log(foo);

I'm guessing this has to do with quokka not using my own tsconfig's paths alongside tsconfig-paths (which I believe is used internally)?

Also, for ts-node esm support with tsconfig-paths, you can use a custom loader passed to node. Is there any way to pass a custom loader to quokka?

the esm branch start script shows using the custom loader. It it passed to node however and calls ts-node/esm from within

[smcenlly]

Apologies, that has to do with the esm and me not including "paths" & tsconfig-paths/register in tsconfig to pair with the baseUrl. Making it simpler with commonjs, removing the ".js" extension and using this tsconfg works for ts-node src/index.ts but not in quokka.

Using your branch without the .js extension, Quokka is working for us. Can you please share any errors you are getting?

I'm guessing this has to do with quokka not using my own tsconfig's paths alongside tsconfig-paths (which I believe is used internally)?

Quokka will use tsconfig.json paths if it is configured.

Also, for ts-node esm support with tsconfig-paths, you can use a TypeStrong/ts-node#1450 (comment) passed to node. Is there any way to pass a custom loader to quokka?

Quokka does not support custom ESM loaders but it does have its own, which for TypeScript and ts-node does the same think that ts-node is doing.

---

You didn't mention whether you were able to get ts-node working from the command with foo.js (with the file extension), I'm assuming that this didn't work for you?

[BrettBedarf]

Using your branch without the .js extension, Quokka is working for us. Can you please share any errors you are getting?

I accidentally still had esm stuff in .quokka but removing makes commonjs with paths work ✅

Quokka does not support custom ESM loaders but it does have its own, which for TypeScript and ts-node does the same think that ts-node is doing.

Does that mean I should be able to use esm + paths with quokka? This would be my ideal scenario but still get Error [ERR_MODULE_NOT_FOUND] on the esm branch that works with a custom loader

[smcenlly]

Would you mind updating your branch so I can see it working with ESM outside of Quokka? Please also let me know how you're running it with the CLI (i.e. provide command and options).

[smcenlly]

I'm going to close this issue as we haven't heard back. If you update the repo, please let us know by replying to this issue and we'll re-open and take a look.

[BrettBedarf]

Hi, the esm branch start script shows using the custom loader.

npm run start

[BrettBedarf]

Also per your prior question about cli working with the .js extension, I added an esm-js branch with a modified custom loader and no --experimental-specifier-resolution=node flag

npm run start

[smcenlly]

Thanks for sharing with us. Quokka doesn't allow for custom loaders because of some of the special logic that it needs to do.

We have extended Quokka to now attempt to resolve paths when using TypeScript and esm. The latest version of Quokka now supports your project/example.

[BrettBedarf]

That is great, thanks!