"Global CSS cannot be imported from files other than your Custom <App>" error in pages/_app.js when files are not owned by the user running Next.js

[andrew-fuchs]

What version of Next.js are you using?

10.0.7 (also found in 10.0.8-canary.17)

What version of Node.js are you using?

15.11.0

What browser are you using?

N/A

What operating system are you using?

Alpine Linux 3.13 (in a Docker container on a Windows 10 host)

How are you deploying your application?

next build and next start

Describe the Bug

When building a Docker image, where the project's files are owned by a different Unix user than the one running the build, next build fails with the error:

./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.js

This is happening in projects where no global CSS imports exist other than those in pages/_app.js

The problem appears to be triggered when the project's files are owned by a different Unix user than the one running next build.

Expected Behavior

next build should run without an error, or if the correct file permissions are needed Next.js should print an error message about file permissions instead of an unrelated error about Global CSS imports.

To Reproduce

I've created a git repo to reproduce this at https://github.com/andrew-fuchs/next-js-docker-user-bug

To recreate the problem from scratch:

1. Create a new project with create-next-app
2. Create a Dockerfile, such that next build will be run as a different user than the one that owns the project's files
3. Build the Docker image, or run next build in some other way (making sure that the files are still owned by a different user than the one performing the build)

[andrew-fuchs]

Issues #12226, #14337, #15218, and #22059 appear to be similar and may be related

[JackCA]

I had this same issue when using docker-compose and a read_only volume bind for my directory that contained my pages.

Another symptom of it was that next.js wasn't finding my pages directory at all and was issuing 404's.

Removing the read_only flag fixed it for me

[andrew-fuchs]

Some notes I have after digging into this: The problem appears to be that when next build need to write to the file system but is unable to do so the error handling code prints the unrelated global CSS error instead of a more legible error message.

Quickly looking at the code that produces this error message, it appears that when Next.js uses webpack to build CSS files
errors involving file permissions are somehow being passed on to Next.js's error-loader without being differentiated to check to see what caused the error.

I'm not yet sure why the error doesn't happen earlier if or when another loader is run (where webpack might throw an exception and give a more descriptive error message) since I still have to look deeper into how Next.js's code interacts with webpack.

[giancarlosisasi]

is there a solution for this? 😢

[andrew-fuchs]

is there a solution for this? 😢

I haven't been able to use Next.js recently or have had a chance to look into this more (there's been new releases/changes since I created this ticket). The way to mitigate this (if the error is happening because of Unix user permissions) would be to make sure that every file and directory in the project is owned and writable by the user that will build and/or run it (i.e. no read-only filesystems, chown --recursive ..., chmod --recursive ..., etc). That should make it work, but it's not a great permanent solution since it gets in the way of hardening the security of the box that the code is running on

[giancarlosisasi]

hey @andrew-fuchs thank you so much for your solution but I have just updated to the latest version 11.1.2 and looks like it is fixed 😄
Looks like in my case the problem was a regex bug in windows. It was fixed in this PR #28631

[ijjk]

Closing as this should be resolved in the latest version per above

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.