Quokka "Cannot find module"

[FlorisSteenkamp]

Issue description or question

Hi. I cannot seem to get Quokka working anymore after been using it successfully earlier.

I keep getting the same kind of error in the console. (see below)

I've disabled all other VS Code plugins and reinstalled Quokka to no avail.

I'm starting Quokka with Ctrl + Shift + P and then "Start on Current File" from the file "./src/add3.ts".

There's only one other file in my project folder (tsconfig.json) with contents as below:

{
    "compilerOptions": {
        "strict": true,
        "module": "es2022",
        "target": "es2022",
        "declaration": true,
        "noEmitOnError": true,
        "sourceMap": true,
        "outDir": "node",
        "moduleResolution": "node"
    },
    "include": [
        "src/add3.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Any help will be appreciated. Thanks.

Sample code

File: .src/add.js

function add(a: number, b: number): number {
    return a + b;
}
export { add }

File: .src/add3.js

import { add } from "./add.js";

function add3(a: number, b: number, c: number): number {
    return add(add(a,b), c);
}

export { add3 }

Sample repository link

Quokka.js Console Output

​​​​​Quokka PRO 'add3.ts' (node: v20.2.0, TypeScript: v4.9.5)​​​​
 
Cannot find module './add.js' 
Require stack: 
- .\src\add3.js 
  ​​​​​at ​​​​​​​​Object.<anonymous>​​​ ​src/add3.ts:1

Code editor version

Version: 1.75.0 (user setup)

OS name and version

Windows Version 10.0.19044 Build 19044

[smcenlly]

I assume (based on your Quokka Console Output) that the file extensions you provided .src/add.js, and .src/add3.js are actually .ts and not .js as you have specified.

Your problem is caused by explicitly importing with a file extension (i.e. import { add } from "./add.js";) and there is no add.js file on disk.

This may work with your compiled code, but will not run when using Quokka or if running your code directly with TypeScript using ts-node.

To fix the problem, please update your import to import { add } from "./add";. It will work for you both in Quokka, and in your compiled TypeScript.

[FlorisSteenkamp]

Thanks for your reply and yes it is ".ts" files.

However, if I remove the ".js" extension my code won't work in the browser, only in node and also not with Webpack.

Is there a way around that?

[smcenlly]

However, if I remove the ".js" extension my code won't work in the browser, only in node and also not with Webpack.

Unfortunately, the .js will be breaking when you run in node with either Quokka or ts-node using commonjs. In this case, the file simply doesn't exist and can't be found/resolved. You can set package.json "type": "module" and it should work for you in both places, but without knowing your project structure, I don't know if this is a safe option for you.

If you are using webpack, then you should also be able to update your configuration to bundle and load your TypeScript files without an explicit .js extension. This link should help you get started.

[FlorisSteenkamp]

Thanks for your reply.

I am not using (and do not want to) use commonjs. I am using ESM. I've added package.json "type": "module".

I've created a very simple repo here.

Whether I import using import { add } from "./add.js"; or import { add } from "./add"; in both cases I get the console error message

Cannot find module '.\src\add.js' imported from .\src\add3.js 

or

Cannot find module '.\src\add' imported from .\src\add3.js 

Surely I must be doing something wrong?

[smcenlly]

Thanks for the sample repo.

I cloned your repo and started Quokka on src/add3.ts and it's working for me:

---

Can you please ensure that you're using the latest version of the Quokka for VS Code extension, v1.0.549?