Sourcemaps stop working due to multiline comment + CRLF line endings

[leroydev]

What version of Next.js are you using?

Happens in at least 12.0.0, 12.0.7, 12.0.8-canary.5 and 12.0.8-canary.8.

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

When my function has a multiline comment, sourcemaps break.
I can't set a breakpoint on the first console.log and the variables in "Scope" make no sense:

Expected Behavior

I expected the same behavior as when the multiline comment is removed, so being able to set a breakpoint on the first console.log and the "Scope" looking like this:

To Reproduce

• Clone https://github.com/leroydev/nextjs-sourcemaps (it's a minimal working example, just 1 extra commit on top of npx create-next-app@latest --ts)
• Execute yarn to install the dependencies
• Run yarn dev to start Next.js in development
• Open http://localhost:3000
• Open Chrome DevTools -> CTRL + P -> LogSomeText.ts
• Set breakpoints inside the function and reload

You can see that when you completely remove the multiline comment in LogSomeText.ts, you can set a breakpoint on the first console.log again and the variables in the scope make sense again.

[balazsorban44]

I'm not really sure what the bug is, I cannot reproduce what you are describing (eg.: I always get what you are describing on the second image).

As a note, the LogSomeText.ts is inside the pages folder. Every file inside the pages is expected to have a default import. If your component isn't representing a page, move it outside of that folder.

[leroydev]

@balazsorban44 Hmm which browser and OS are you using? And are you using my repository? Because I can imagine that without TypeScript, you won't have this problem.

I'm aware that having it in the pages folder is against best practices. It doesn't matter for this bug though, in our private codebase we have this exact file in the src folder and it still happens. Each file that has multiline comments has messed up breakpoints in our private codebase.

Edit: On another Windows PC with Chrome I can't reproduce it either.. Really weird, because on my own PC with a clean clone of my test repository, I can reproduce it everytime, even on Firefox..

[leroydev]

@balazsorban44 When changing the linefeed from CRLF to LF and trying again, the issue is resolved. So it seems to be a bug when combining CRLF with multiline comments. Can you try if you can reproduce it with CRLF linefeeds enabled in LogSomeText.ts? You can change the linefeed in VSCode in the bottom right.

We can use this as a workaround but I feel like this bug should also be fixed, because it's very hard to debug when you run into this issue.. I think CRLF is the default on Git on Windows because CRLF is the native line ending on Windows.

[balazsorban44]

I am on Linux, and I used your reproduction.

You are correct though, I could reproduce it by changing the line ending to CRLF and resave the LogSomeText.ts file.

It happens when using the SWC transform.

[leroydev]

I think this might possibly be fixed in swc-project/swc#3023, which has been released in swc_ecma_codegen 0.83.2.
I can't get a local Next.js version to work with a custom SWC build though, so I unfortunately can't verify this.

[leroydev]

@balazsorban44 Unfortunately, this issue wasn't fixed by #32566.
I upgraded https://github.com/leroydev/nextjs-sourcemaps to 12.0.8-canary.8, deleted .next, executed yarn and yarn dev and still run into the same issue.
Can you reopen this issue please? :)

[prometixX]

I also experienced the issue with line ending CRLF breaking my Vscode debugger and resulting in breakpoints jumping and "old code" in the debugger.

I only experienced this in server side Nextjs code.
For example in an API route when I invoked a function that I imported from another file the breakpoints in this function did not work properly. I got jumping breakpoints and the debugger stopped at code parts that should not be invoked anymore (for example when I moved code around).

When I changed the line ending of this file (of the imported function) to CRLF to LF, everything worked normally.

I used the following versions:

• next: 13.1.1,
• react: 18.2.0
• typescript: ^4.9.4
• node: 18.12.1

And the default launch script for vscode from the Nextjs docs.

[kdy1]

@prometixX Can you try updating next?

[prometixX]

@prometixX Can you try updating next?

Its really strange, right now I cant replicate the problem anymore, but I did not update.
Before I always had this issue when the file hat CRLF endings and switching to LF fixed it. (Tried that multiple times)
Maybe the issue on my side was related to something else and Vscode (or the debugger) could not refresh the code.

If this debugging issue occurs again, I will check if LF line endings fixes it again, but for now I cant replicate it anymore.

[kdy1]

Can someone provide a repro? I think this is fixed by swc-project/swc@26a0c13

[leroydev]

@kdy1 Sorry for the late response, I updated Next.js and React to the latest version in my reproduction repository and the problem is resolved:

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.