Next.js 13 Using a Loading UI alongside an async Server Component with SCSS module generates a runtime syntax error (unexpected token: string literal) #42723

JDBar · 2022-11-10T03:39:42Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home  
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.3-canary.2     
      eslint-config-next: 13.0.2
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 106.0.5 (64-bit)

How are you deploying your application? (if relevant)

next dev

Describe the Bug

In next dev mode, when a scss module is imported and its styles are referenced in the rendering of an async server component, such as app/page.tsx, and at the same time there is an app/loading.tsx present, then a browser refresh will generate a syntax error (unexpected token: string literal) in the loaded HTML.

The generated syntax error can be found in the final script tag of the page after a browser refresh in next dev mode:

<!DOCTYPE html>
<html lang="en">
	<!-- ... -->
	<!-- the very last script tag with syntax error -->
		<script>
			B:0","S:0",[["/_next/static/css/app_page_module_scss.css?ts=1668046543925","high"]])
		</script>
	</body>
</html>

Expected Behavior

No syntax error to be generated and the page to load successfully.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/JDBar/next13-async-sass-module-bug

To Reproduce

First I ran:

npx create-next-app@latest --experimental-app
npm i sass

I then created an async server component in the app folder which also imported and referenced an scss module.

app/page.module.scss

.exampleClass {
	color: green;
}

app/page.tsx

import styles from "./page.module.scss";

// Some async data fetching function.
function getData() {
	return new Promise<{ value: number }>((resolve) => {
		setTimeout(() => {
			resolve({ value: 123 });
		}, 1000);
	});
}

// Our async server component.
export default async function Home() {
	const data = await getData();
	return <h1 className={styles.exampleClass}>{data.value}</h1>;
}

This works as expected when running next dev. Opening localhost:3000 loads successfully, and refreshing works.

However, we can generate a syntax error at runtime after introducing one of the new instant loading states.

app/loading.tsx

export default function Loading() {
	return <div>Loading...</div>;
}

Now, running next dev will work on initial page load, but generate a syntax error on page refresh.

The text was updated successfully, but these errors were encountered:

Arctomachine · 2022-11-23T00:55:57Z

Encountered this bug tonight when pushed my app into production. I can confirm removing loading.tsx fixed it.
But while I was developing and testing locally, both dev and start, I did not have this error at all.
On the other hand, I had 2 loading.tsx. One of them worked fine, but the other did not work at all. I suspect the second one was actually triggering this bug, but not giving me error notification for some reason.

dafengzhen · 2022-11-23T15:11:43Z

I'm also having this problem, when loading is used with async fetch data it reports an error

nkpgardose · 2022-11-24T17:52:14Z

This is similar to this issue. #42466

Looks like node v18, react issue. Try upgrading to next to 13.0.5 that might solve the issue 👍 #43288

dafengzhen · 2022-11-25T07:59:08Z

This is similar to this issue. #42466

Looks like node v18, react issue. Try upgrading to next to 13.0.5 that might solve the issue 👍 #43288

awesome, running ok

benjamin0204 · 2023-01-08T18:06:16Z

This is similar to this issue. #42466

Looks like node v18, react issue. Try upgrading to next to 13.0.5 that might solve the issue 👍 #43288

Life saver! I've been working around this issue for a few days now. Solved it 👍

hugues-m · 2023-01-13T14:32:53Z

Hey, I still have this issue with node 19 (I tried with 19.1, 19.3 and 19.4), and node 18.13 with next 13.1.2 .
Does anyone has a workaround ?

kleemeo · 2023-05-10T14:15:07Z

Having this error come up in Next 13.4.1 (app-router) with loading.ts file as well. Error goes away when loading.ts is removed.

l-you · 2023-07-05T14:06:47Z

#49871 may have a similar root of problem .

DenisBessa · 2024-02-04T20:49:05Z

I'm still having this issue In v14.1.0

petejodo · 2024-05-20T21:24:30Z

potentially a clue, this error only raises if a <Suspense> is rendered. Removing it, the error goes away.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Mon Feb 19 19:45:09 PST 2024; root:xnu-8796.141.3.704.6~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.3
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: standalone

JDBar added the bug Issue was opened via the bug report template. label Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js 13 Using a Loading UI alongside an async Server Component with SCSS module generates a runtime syntax error (unexpected token: string literal) #42723

Next.js 13 Using a Loading UI alongside an async Server Component with SCSS module generates a runtime syntax error (unexpected token: string literal) #42723

JDBar commented Nov 10, 2022

Arctomachine commented Nov 23, 2022

dafengzhen commented Nov 23, 2022

nkpgardose commented Nov 24, 2022 •

edited

Loading

dafengzhen commented Nov 25, 2022

benjamin0204 commented Jan 8, 2023

hugues-m commented Jan 13, 2023 •

edited

Loading

kleemeo commented May 10, 2023

l-you commented Jul 5, 2023

DenisBessa commented Feb 4, 2024

petejodo commented May 20, 2024

Next.js 13 Using a Loading UI alongside an async Server Component with SCSS module generates a runtime syntax error (unexpected token: string literal) #42723

Next.js 13 Using a Loading UI alongside an async Server Component with SCSS module generates a runtime syntax error (unexpected token: string literal) #42723

Comments

JDBar commented Nov 10, 2022

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

To Reproduce

Arctomachine commented Nov 23, 2022

dafengzhen commented Nov 23, 2022

nkpgardose commented Nov 24, 2022 • edited Loading

dafengzhen commented Nov 25, 2022

benjamin0204 commented Jan 8, 2023

hugues-m commented Jan 13, 2023 • edited Loading

kleemeo commented May 10, 2023

l-you commented Jul 5, 2023

DenisBessa commented Feb 4, 2024

petejodo commented May 20, 2024

nkpgardose commented Nov 24, 2022 •

edited

Loading

hugues-m commented Jan 13, 2023 •

edited

Loading