Ensure externals are correct for mini-css-extract-plugin (#25340)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: ijjk

packages/next/build/webpack/require-hook.ts

@@ -43,6 +43,7 @@ const hookPropertyMap = new Map(
     ],
     ['webpack/lib/GraphHelpers', 'next/dist/compiled/webpack/GraphHelpers'],
     ['webpack/lib/GraphHelpers.js', 'next/dist/compiled/webpack/GraphHelpers'],
+    ['webpack/lib/NormalModule', 'next/dist/compiled/webpack/NormalModule'],
     ['webpack-sources', 'next/dist/compiled/webpack/sources'],
     ['webpack-sources/lib', 'next/dist/compiled/webpack/sources'],
     ['webpack-sources/lib/index', 'next/dist/compiled/webpack/sources'],

packages/next/compiled/mini-css-extract-plugin/index.js

@@ -694,7 +694,7 @@ export async function ncc_webpack_bundle5(task, opts) {
 }
 
 const webpackBundlePackages = {
-  webpack: 'next/dist/compiled/webpack/webpack',
+  webpack: 'next/dist/compiled/webpack/webpack-lib',
 }
 
 Object.assign(externals, webpackBundlePackages)

packages/next/compiled/mini-css-extract-plugin/loader.js

@@ -0,0 +1,5 @@
+module.exports = {
+  future: {
+    webpack5: false,
+  },
+}

packages/next/taskfile.js

@@ -0,0 +1,27 @@
+import styles from './Component2.module.scss'
+
+export default function Content2() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.header}>Where does it come from?</h1>
+      <div className={styles.textContent}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+        Cicero, written in 45 BC. This book is a treatise on the theory of
+        ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+        1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+        reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+        "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </div>
+    </div>
+  )
+}

test/integration/next-dynamic-css/next.config.js

@@ -0,0 +1,13 @@
+.header {
+  font-style: italic;
+}
+
+.container {
+  background-color: #dddddd;
+  padding: 1rem;
+}
+
+.textContent {
+  color: #666;
+  letter-spacing: -1px;
+}

test/integration/next-dynamic-css/src/Component2.jsx

@@ -0,0 +1,29 @@
+import styles from './Content.module.css'
+import Content2 from './Component2'
+
+export default function Content() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.header}>Where does it come from?</h1>
+      <div className={styles.textContent}>
+        Contrary to popular belief, Lorem Ipsum is not simply random text. It
+        has roots in a piece of classical Latin literature from 45 BC, making it
+        over 2000 years old. Richard McClintock, a Latin professor at
+        Hampden-Sydney College in Virginia, looked up one of the more obscure
+        Latin words, consectetur, from a Lorem Ipsum passage, and going through
+        the cites of the word in classical literature, discovered the
+        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+        of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
+        Cicero, written in 45 BC. This book is a treatise on the theory of
+        ethics, very popular during the Renaissance. The first line of Lorem
+        Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
+        1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is
+        reproduced below for those interested. Sections 1.10.32 and 1.10.33 from
+        "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
+        exact original form, accompanied by English versions from the 1914
+        translation by H. Rackham.
+      </div>
+      <Content2 />
+    </div>
+  )
+}

test/integration/next-dynamic-css/src/Component2.module.scss

@@ -0,0 +1,13 @@
+.header {
+  font-style: italic;
+}
+
+.container {
+  background-color: #dddddd;
+  padding: 1rem;
+}
+
+.textContent {
+  color: #666;
+  letter-spacing: -1px;
+}