Can't use JS/TS objects like Map and Date

[Darksoulsong]

Issue description or question

Is this issue related to Quokka not outputting the expected results of your code?: Yes

Sample code

const map = new Map();
// or
const date = new Date();

Quokka.js Console Output

​​​​​Quokka PRO 'Untitled-1.ts' (node: v16.13.2, TypeScript: v4.5.5, plugins: jsdom-quokka-plugin)​​​​
 
Error ./quokka.ts (1,17): Cannot find name 'Map'. Did you mean 'map'? 

Code editor version

Visual Studio Code v1.64.2

OS name and version

Ubuntu 20.04.3 LTS

[smcenlly]

We couldn't reproduce your problem using a fresh project with your same packages. I suspect it's related to your tsconfig.json.

Could you please check that this repo works for you?

1. From the CLI: git clone https://github.com/wallabyjs/quokka-755
2. Change to newly created quokka-755 folder
3. Run npm install
4. Open in VS Code and start Quokka on quokka.ts file.

If it works for you, can you please change tsconfig.json with the tsconfig from your project? I expect it will break. Please share that configuration for us and we can take a look at what's wrong with it for you.

I expect that due to your compiler settings, you will also get the same problem if you run npx ts-node quokka.ts from the command-line. If this is the case, your compiler settings will have to be fixed/overridden to make Quokka work.

[Darksoulsong]

Hello @smcenlly , thanks for the quick reply.

I cloned your repo and it works for me, I think you're right about my tsconfig settings.
I'm working on a microfrontend with single spa and my tsconfig extends some specific configuration in order to work (ts-config-single-spa).

This is what I have in my tsconfig.json file:

{
  "extends": "ts-config-single-spa",
  "compilerOptions": {
    "jsx": "react-jsx",
    "declarationDir": "dist"
  },
  "files": ["src/management-app-avd.tsx"],
  "include": ["src/**/*"],
  "exclude": ["src/**/*.test*", "node_modules"]
}

[smcenlly]

I took a look at the TypeScript compiler options for ts-config-single-spa (see below):

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015",
      "es2015.promise",
      "es2016.array.include",
      "es2018"
    ],
    "declaration": true,
    "emitDeclarationOnly": true
  }
}

The line:

    "emitDeclarationOnly": true

will cause the compiler to only generate .d.ts files (without any code). This was causing Quokka to fail. We've updated the latest version of Quokka to explicitly override this setting as it never makes sense to run Quokka with this compiler option set to true.

Please update your Quokka for VS Code extension to v1.0.450+. It will fix the problem for you.