File copy error when building with outputStandalone + optimizeCss

[javlund]

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
Binaries:
  Node: 14.17.5
  npm: 6.14.15
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.3-canary.0
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next build

Describe the Bug

We have a next application (using styled-components) that needs to be deployed as a Docker container. Using the guidelines in the Docker example, we've enabled outputStandalone in next.config.js.

Now we're experiencing FOUC, and my assumption was that this was due to the CSS been delivered from a separate file, and that the FOUC was due to the wait between the initial HTML load and the CSS loading/parsing. Thus, a way to fix this could be to inline critical CSS.

I discovered that this was now possible with the experimental option optimizeCss and installing critters. However, when I do both and then run next build, I get this output:

> next build

warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/4)Time 7.591497
Time 11.398525
Time 12.087
[=   ] info  - Generating static pages (3/4)Inlined 476 B (4% of original 11.3 kB) of _next/static/css/fbf5f08436f8ec98.css.
Time 32.824959
info  - Generating static pages (4/4)
info  - Finalizing page optimization  


> Build error occurred
[Error: ENOENT: no such file or directory, copyfile '/home/avlund/propstep/web-front/.next/static/css/fbf5f08436f8ec98.css' -> '/home/avlund/propstep/web-front/.next/standalone/.next/static/css/fbf5f08436f8ec98.css'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'copyfile',
  path: '/home/avlund/propstep/web-front/.next/static/css/fbf5f08436f8ec98.css',
  dest: '/home/avlund/propstep/web-front/.next/standalone/.next/static/css/fbf5f08436f8ec98.css'
}

The source file exists, but the destination path doesn't (standalone/.next does not contain the static folder) and I'm guessing that's why it fails.

The error makes sense as it is clearly stated that one has to manually copy the static folder to standalone/.next if needed. This is problematic, however, as the build process seems to expect that it exists before I have the opportunity to actually copy the folder.

Am I doing something wrong? Or should I take an entirely different approach to fixing the FOUC?

Expected Behavior

A successful build with no errors, and eventually a page that inlines critical CSS and prevents the FOUC.

To Reproduce

1. Have both outputStandalone and optimizeCss turned on in next.config.js (here's my file for reference):

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
  experimental: {
    outputStandalone: true,
    optimizeCss: true,
  }
};

2. Install critters:

npm i critters

3. Run the build process:

next build

[javlund]

Hi guys! Has anyone had time to look into this?

[ijjk]

Hi, this has been updated in v12.1.5-canary.6 of Next.js, please update and give it a try!

[javlund]

That was fast @ijjk , thanks a lot! I'll try it out later today.

[javlund]

@ijjk I can confirm it doesn't break anymore with the canary build. I didn't see a difference in the build output, though, but that's another story.

[github-actions]

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