shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.06k stars 51 forks source link

Transform errors: Expected "}" but found ":" #148

Open chopfitzroy opened 2 years ago

chopfitzroy commented 2 years ago

I have recently been trying to integrate remark-shiki-twoslash with Astro and I have been getting some weird errors.

Reproduction repo here.

I have the following code block in a markdown file:

interface IdLabel {id: number, /* some fields */ }
interface NameLabel {name: string, /* other fields */ }
type NameOrId<T extends number | string> = T extends number ? IdLabel : NameLabel;
// This comment should not be included

// ---cut---
function createLabel<T extends number | string>(idOrName: T): NameOrId<T> {
  throw "unimplemented"
}

let a = createLabel("typescript");

Copied directly from the verify section in the remark-shiki-twoslash docs.

But when I try to build the project I get the following error.

Error: Transform failed with 1 error:
/src/pages/posts/index.md:34:3154: ERROR: Expected "}" but found "typescript"
    at failureErrorWithLog (/node_modules/esbuild/lib/main.js:1605:15)
    at /node_modules/esbuild/lib/main.js:1394:29
    at /node_modules/esbuild/lib/main.js:668:9
    at handleIncomingPacket (/node_modules/esbuild/lib/main.js:765:9)
    at Socket.readFromStdout (/node_modules/esbuild/lib/main.js:635:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Now if I update the before code to be:

- let a = createLabel("typescript");
+ let a = createLabel<string>("typescript"); 

Everything works exactly as expected and the code compiles correctly.

What I am trying to figure out is this remark-shiki-twoslash inheriting some TS settings from elsewhere in the project or is this Astro or esbuild interfering with remark-shiki-twoslash?

I also tried pasting the code from the docs into the playground to see if it worked as expected and it does, can be seen here. This would indicate to me that it is most likely something else interfering but I am struggling to figure out what.

prastoin commented 2 years ago

Also encountering and investigating about this issue. Eager to know more too :pray: