diff --git a/packages/next/build/webpack/config/blocks/css/plugins.ts b/packages/next/build/webpack/config/blocks/css/plugins.ts
index 81b9a9bcbc844e3..cbf5166a3cf2dd3 100644
--- a/packages/next/build/webpack/config/blocks/css/plugins.ts
+++ b/packages/next/build/webpack/config/blocks/css/plugins.ts
@@ -193,6 +193,15 @@ export async function getPostCssPlugins(
         }
         throw new Error(genericErrorText)
       }
+    } else if (typeof plugin === 'function') {
+      console.error(
+        `${chalk.red.bold(
+          'Error'
+        )}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${chalk.bold(
+          'string'
+        )}.`
+      )
+      throw new Error(genericErrorText)
     } else {
       console.error(
         `${chalk.red.bold(
diff --git a/test/integration/css-customization/test/index.test.js b/test/integration/css-customization/test/index.test.js
index c16a70d710e8261..2153553cb2e4889 100644
--- a/test/integration/css-customization/test/index.test.js
+++ b/test/integration/css-customization/test/index.test.js
@@ -331,6 +331,23 @@ describe('Bad CSS Customization Array (7)', () => {
   })
 })
 
+describe('Bad CSS Customization Array (8)', () => {
+  const appDir = join(fixturesDir, 'bad-custom-configuration-arr-8')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+  })
+
+  it('should fail the build', async () => {
+    const { stderr } = await nextBuild(appDir, [], { stderr: true })
+
+    expect(stderr).toMatch(
+      /A PostCSS Plugin was passed as a function using require\(\), but it must be provided as a string/
+    )
+    expect(stderr).toMatch(/Build error occurred/)
+  })
+})
+
 describe('Bad CSS Customization Function', () => {
   const appDir = join(fixturesDir, 'bad-custom-configuration-func')
 
diff --git a/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/_app.js b/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/_app.js
new file mode 100644
index 000000000000000..17a2196742e95d7
--- /dev/null
+++ b/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/_app.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp
diff --git a/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/index.js b/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/index.js
new file mode 100644
index 000000000000000..b3ba78da2d5e17c
--- /dev/null
+++ b/test/integration/css-fixtures/bad-custom-configuration-arr-8/pages/index.js
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div />
+}
diff --git a/test/integration/css-fixtures/bad-custom-configuration-arr-8/postcss.config.js b/test/integration/css-fixtures/bad-custom-configuration-arr-8/postcss.config.js
new file mode 100644
index 000000000000000..5f1f2140125ebd9
--- /dev/null
+++ b/test/integration/css-fixtures/bad-custom-configuration-arr-8/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-trolling')],
+}
diff --git a/test/integration/css-fixtures/bad-custom-configuration-arr-8/styles/global.css b/test/integration/css-fixtures/bad-custom-configuration-arr-8/styles/global.css
new file mode 100644
index 000000000000000..78d27f7edd8e4a8
--- /dev/null
+++ b/test/integration/css-fixtures/bad-custom-configuration-arr-8/styles/global.css
@@ -0,0 +1,14 @@
+/* this should pass through untransformed */
+@media (480px <= width < 768px) {
+  a::before {
+    content: '';
+  }
+  ::placeholder {
+    color: green;
+  }
+}
+
+/* this should be transformed to width/height */
+.video {
+  -xyz-max-size: 400rem 300rem;
+}