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
Description
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 sassI 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.
