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;
+}

test/integration/next-dynamic-css/src/inner/k.jsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic'
+
+export const Comp = dynamic(() => import('../Content'), { ssr: false })

test/integration/next-dynamic-css/src/pages/index.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import style from '../Content4.module.css'
+import { Comp } from '../inner/k'
+
+export default function Index() {
+  const [s] = useState(true)
+
+  if (s) {
+    return (
+      <>
+        <div className={style.header}></div>
+        <Comp />
+      </>
+    )
+  }
+
+  return null
+}
+
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}

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

@@ -0,0 +1,56 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+  findPort,
+  launchApp,
+  killApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+let app
+let appPort
+const appDir = join(__dirname, '../')
+
+function runTests() {
+  it('should load page correctly', async () => {
+    const browser = await webdriver(appPort, '/')
+
+    expect(
+      await browser
+        .elementByCss('#__next div:nth-child(2)')
+        .getComputedCss('background-color')
+    ).toContain('221, 221, 221')
+
+    expect(await browser.eval('document.documentElement.innerHTML')).toContain(
+      'Where does it come from?'
+    )
+  })
+}
+
+describe('next/dynamic', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests(true)
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(() => killApp(app))
+
+    runTests()
+  })
+})