diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 741dd1618cb9c..4c28435d64a84 100644
--- a/packages/next/client/index.tsx
+++ b/packages/next/client/index.tsx
@@ -18,7 +18,11 @@ import * as envConfig from '../next-server/lib/runtime-config'
 import type { NEXT_DATA } from '../next-server/lib/utils'
 import { getURL, loadGetInitialProps, ST } from '../next-server/lib/utils'
 import initHeadManager from './head-manager'
-import PageLoader, { looseToArray, StyleSheetTuple } from './page-loader'
+import PageLoader, {
+  INITIAL_CSS_LOAD_ERROR,
+  looseToArray,
+  StyleSheetTuple,
+} from './page-loader'
 import measureWebVitals from './performance-relayer'
 import { createRouter, makePublicRouterInstance } from './router'
 
@@ -286,6 +290,9 @@ export default async (opts: { webpackHMR?: any } = {}) => {
       }
     }
   } catch (error) {
+    if (INITIAL_CSS_LOAD_ERROR in error) {
+      throw error
+    }
     // This catches errors like throwing in the top level of a module
     initialErr = error
   }
diff --git a/packages/next/client/page-loader.ts b/packages/next/client/page-loader.ts
index 34534a5688986..c3340e3b20b49 100644
--- a/packages/next/client/page-loader.ts
+++ b/packages/next/client/page-loader.ts
@@ -1,15 +1,14 @@
 import { ComponentType } from 'react'
 import type { ClientSsgManifest } from '../build'
 import type { ClientBuildManifest } from '../build/webpack/plugins/build-manifest-plugin'
-import mitt from '../next-server/lib/mitt'
 import type { MittEmitter } from '../next-server/lib/mitt'
+import mitt from '../next-server/lib/mitt'
 import {
   addBasePath,
-  markLoadingError,
-  interpolateAs,
   addLocale,
+  interpolateAs,
+  markLoadingError,
 } from '../next-server/lib/router/router'
-
 import getAssetPathFromRoute from '../next-server/lib/router/utils/get-asset-path-from-route'
 import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
 import { parseRelativeUrl } from '../next-server/lib/router/utils/parse-relative-url'
@@ -17,22 +16,6 @@ import { parseRelativeUrl } from '../next-server/lib/router/utils/parse-relative
 export const looseToArray = <T extends {}>(input: any): T[] =>
   [].slice.call(input)
 
-function getInitialStylesheets(): StyleSheetTuple[] {
-  return looseToArray<CSSStyleSheet>(document.styleSheets)
-    .filter(
-      (el: CSSStyleSheet) =>
-        el.ownerNode &&
-        (el.ownerNode as Element).tagName === 'LINK' &&
-        (el.ownerNode as Element).hasAttribute('data-n-p')
-    )
-    .map((sheet) => ({
-      href: (sheet.ownerNode as Element).getAttribute('href')!,
-      text: looseToArray<CSSRule>(sheet.cssRules)
-        .map((r) => r.cssText)
-        .join(''),
-    }))
-}
-
 function hasRel(rel: string, link?: HTMLLinkElement) {
   try {
     link = document.createElement('link')
@@ -44,6 +27,8 @@ function pageLoadError(route: string) {
   return markLoadingError(new Error(`Error loading ${route}`))
 }
 
+export const INITIAL_CSS_LOAD_ERROR = Symbol('INITIAL_CSS_LOAD_ERROR')
+
 const relPrefetch =
   hasRel('preload') && !hasRel('prefetch')
     ? // https://caniuse.com/#feat=link-rel-preload
@@ -413,7 +398,9 @@ export default class PageLoader {
             // should resolve instantly.
             Promise.all(cssFiles.map((d) => fetchStyleSheet(d))).catch(
               (err) => {
-                if (isInitialLoad) return getInitialStylesheets()
+                if (isInitialLoad) {
+                  Object.defineProperty(err, INITIAL_CSS_LOAD_ERROR, {})
+                }
                 throw err
               }
             )