Fix css dependency in /_error (#17301)

packages/next/pages/_document.tsx

@@ -55,8 +55,7 @@ function getDocumentFiles(
   pathname: string
 ): DocumentFiles {
   const sharedFiles: readonly string[] = getPageFiles(buildManifest, '/_app')
-  const pageFiles: readonly string[] =
-    pathname !== '/_error' ? getPageFiles(buildManifest, pathname) : []
+  const pageFiles: readonly string[] = getPageFiles(buildManifest, pathname)
 
   return {
     sharedFiles,

test/integration/document-file-dependencies/css/404.module.css

+.notFound {
+  color: rgb(0, 255, 0);
+}

test/integration/document-file-dependencies/css/error.module.css

+.error {
+  color: rgb(255, 0, 0);
+}

test/integration/document-file-dependencies/css/global.css

+.global {
+  background-color: rgb(200, 200, 200);
+}

test/integration/document-file-dependencies/css/index.module.css

+.index {
+  color: rgb(0, 0, 255);
+}

test/integration/document-file-dependencies/pages/404.js

+import style from '../css/404.module.css'
+
+export default function NotFound() {
+  return (
+    <div id="notFound" className={`global ${style.notFound}`}>
+      error
+    </div>
+  )
+}

test/integration/document-file-dependencies/pages/_app.js

+import '../css/global.css'
+
+function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default App

test/integration/document-file-dependencies/pages/_error.js

+import style from '../css/error.module.css'
+
+export default function Error() {
+  return (
+    <div id="error" className={`global ${style.error}`}>
+      error
+    </div>
+  )
+}

test/integration/document-file-dependencies/pages/error-trigger.js

+function ErrorTrigger() {
+  return <div>error-trigger</div>
+}
+
+ErrorTrigger.getInitialProps = () => {
+  throw new Error('Intentional Error')
+
+  // eslint-disable-next-line no-unreachable
+  return {}
+}
+
+export default ErrorTrigger

test/integration/document-file-dependencies/pages/index.js

+import style from '../css/index.module.css'
+
+export default function Index() {
+  return (
+    <div id="index" className={`global ${style.index}`}>
+      index
+    </div>
+  )
+}

test/integration/document-file-dependencies/test/index.test.js

+/* eslint-env jest */
+
+import { join } from 'path'
+import { findPort, killApp, nextBuild, nextStart } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+jest.setTimeout(1000 * 60 * 2)
+const appDir = join(__dirname, '..')
+
+let appPort
+let app
+
+describe('File Dependencies', () => {
+  describe('production mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      await nextBuild(appDir)
+      app = await nextStart(appDir, appPort)
+    })
+
+    afterAll(() => killApp(app))
+
+    it('should apply styles defined in global and module css files in a standard page.', async () => {
+      const browser = await webdriver(appPort, '/')
+      await browser.waitForElementByCss('#index')
+
+      const styles = await browser.eval(() => {
+        const computed = getComputedStyle(document.getElementById('index'))
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+        }
+      })
+
+      expect(styles).toEqual({
+        color: 'rgb(0, 0, 255)',
+        backgroundColor: 'rgb(200, 200, 200)',
+      })
+    })
+
+    it('should apply styles defined in global and module css files in 404 page', async () => {
+      const browser = await webdriver(appPort, '/__not_found__')
+      await browser.waitForElementByCss('#notFound')
+
+      const styles = await browser.eval(() => {
+        const computed = getComputedStyle(document.getElementById('notFound'))
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+        }
+      })
+
+      expect(styles).toEqual({
+        color: 'rgb(0, 255, 0)',
+        backgroundColor: 'rgb(200, 200, 200)',
+      })
+    })
+
+    it('should apply styles defined in global and module css files in error page', async () => {
+      const browser = await webdriver(appPort, '/error-trigger')
+      await browser.waitForElementByCss('#error')
+
+      const styles = await browser.eval(() => {
+        const computed = getComputedStyle(document.getElementById('error'))
+        return {
+          color: computed.color,
+          backgroundColor: computed.backgroundColor,
+        }
+      })
+
+      expect(styles).toEqual({
+        color: 'rgb(255, 0, 0)',
+        backgroundColor: 'rgb(200, 200, 200)',
+      })
+    })
+  })
+})