search

wallabyjs / quokka

Repository for Quokka.js questions and issues
https://quokkajs.com
1.18k stars 31 forks source link

TSError: Unable to compile TypeScript #919

Closed macjabeth closed 12 months ago

macjabeth commented 12 months ago

Issue description or question

I'm getting the following error in the console when trying to run Quokka on a Next.js starter TypeScript file.

​​​​Quokka PRO {⚡} 'utils.ts' (node: v20.9.0, TypeScript: v5.2.2, plugins: jsdom-quokka-plugin)​​​​
 
TSError: ⨯ Unable to compile TypeScript: 
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later. 
 
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10) 
    at Module.load (node:internal/modules/cjs/loader:1091:32) 
    at Function.Module._load (node:internal/modules/cjs/loader:938:12) 
    at Module.require (node:internal/modules/cjs/loader:1115:19) 
    at require (node:internal/modules/helpers:130:18) 
    at Array.forEach (<anonymous>) 

Sample repository link

I was following the Next.js getting started guide here: https://nextjs.org/learn/dashboard-app/getting-started

The command to create the same setup would be

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

The failing file was app/lib/utils.ts.

Quokka.js Console Output

Capture 2023-12-03 at 11 54 50@2x

Code editor & OS name/version

Visual Studio Code v1.84.2 Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e Date: 2023-11-09T10:52:57.054Z Electron: 25.9.2 ElectronBuildId: 24603566 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Darwin arm64 23.1.0

mburnell commented 12 months ago

Thanks for reporting the issue. While your code runs when using next.js CLI tools, it's not valid for running code with node.js, which is how Quokka works. Because your TypeScript configuration has moduleResolution: "bundler", this means ES module code will be emitted, which is not going to work in node.js without having type: "module" in your package.json. To allow Quokka to work in these cases we've added logic to force moduleResolution: "Node16" when type: "module" has not been specified. This logic is available in Quokka for VS Code version 1.0.599.