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

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

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/taskfile.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)

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

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

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

@@ -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/src/Component2.module.scss

@@ -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/Content.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/Content.module.css

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