SCSS file imports break without declaring 'use client'

[jmikrut]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.14.2
      npm: 9.5.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.10-canary.3
      eslint-config-next: 13.1.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/payloadcms/next-payload-demo

To Reproduce

The reproduction repo is deployed in production at the following link:

https://nextjs-vercel.payloadcms.com/api/users/me

To see the issue, navigate to the /api/users/me route. The page will 500.

Describe the Bug

The /api/users/me endpoint is a serverless function in the /pages/api folder which imports a Payload config, and the Payload config imports .scss files. The config is isomorphic and is used within server-side code as well as the client bundle.

The serverless function is unable to parse the .scss file, and errors, causing a 500.

This is only an issue when deployed to Vercel (in production mode, locally, this works fine.) And it used to work fine a few weeks ago (this is a new issue with no changes on our end.)

Expected Behavior

A few weeks ago, .scss file imports used to not break serverless functions in the /pages/api folder, but now they are causing issues. It appears that adding the directive 'use client' to the top of any files that import .scss will fix the problem, but I wanted to know if there was a way to just safely ignore .scss files within the /pages/api folder by using something like null-loader or similar.

I would also just like to understand what the underlying change was to Next that caused this issue to appear.

Thank you!

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

Vercel

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!