Skip to content

Commit 282de73

Browse files
sokraztanner
sokra
authored and
ztanner
committed
disable production chunking in dev (#64488)
### What? The production chunking plugin shouldn't be enabled in development ### Why? It doesn't handle HMR yet Closes PACK-2956
1 parent 1b931ce commit 282de73

File tree

2 files changed

+126
-116
lines changed

2 files changed

+126
-116
lines changed

‎packages/next/src/build/webpack-config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1880,7 +1880,8 @@ export default async function getBaseWebpackConfig(
18801880
new NextFontManifestPlugin({
18811881
appDir,
18821882
}),
1883-
isClient &&
1883+
!dev &&
1884+
isClient &&
18841885
new CssChunkingPlugin(config.experimental.cssChunking === 'strict'),
18851886
!dev &&
18861887
isClient &&

‎test/e2e/app-dir/css-order/css-order.test.ts‎

Lines changed: 124 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import path from 'path'
2-
import { createNextDescribe, FileRef } from 'e2e-utils'
2+
import { nextTestSetup, FileRef } from 'e2e-utils'
33

44
function getPairs(all: string[]): (readonly [string, string])[] {
55
const result: (readonly [string, string])[] = []
@@ -187,141 +187,150 @@ const PAGES: Record<
187187

188188
const allPairs = getPairs(Object.keys(PAGES))
189189

190-
for (const mode of process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])
191-
createNextDescribe(
192-
`css-order ${mode}`,
193-
{
194-
files: {
195-
app: new FileRef(path.join(__dirname, 'app')),
196-
pages: new FileRef(path.join(__dirname, 'pages')),
197-
'next.config.js': process.env.TURBOPACK
198-
? `
190+
const options = (mode) => ({
191+
files: {
192+
app: new FileRef(path.join(__dirname, 'app')),
193+
pages: new FileRef(path.join(__dirname, 'pages')),
194+
'next.config.js': process.env.TURBOPACK
195+
? `
199196
module.exports = {}`
200-
: `
197+
: `
201198
module.exports = {
202199
experimental: {
203200
cssChunking: ${JSON.stringify(mode)}
204201
}
205202
}`,
206-
},
207-
dependencies: {
208-
sass: 'latest',
209-
},
210-
},
211-
({ next, isNextDev }) => {
212-
for (const ordering of allPairs) {
213-
const name = `should load correct styles navigating back again ${ordering.join(
214-
' -> '
215-
)} -> ${ordering.join(' -> ')}`
203+
},
204+
dependencies: {
205+
sass: 'latest',
206+
},
207+
})
208+
describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
209+
'css-order %s',
210+
(mode: string) => {
211+
const { next, isNextDev } = nextTestSetup(options(mode))
212+
for (const ordering of allPairs) {
213+
const name = `should load correct styles navigating back again ${ordering.join(
214+
' -> '
215+
)} -> ${ordering.join(' -> ')}`
216+
if (ordering.some((page) => PAGES[page].conflict)) {
217+
// Conflict scenarios won't support that case
218+
continue
219+
}
220+
// TODO fix this case
221+
const broken =
222+
isNextDev || ordering.some((page) => PAGES[page].brokenLoading)
223+
if (broken) {
224+
it.todo(name)
225+
continue
226+
}
227+
it(name, async () => {
228+
const start = PAGES[ordering[0]]
229+
const browser = await next.browser(start.url)
230+
const check = async (pageInfo) => {
231+
expect(
232+
await browser
233+
.waitForElementByCss(pageInfo.selector)
234+
.getComputedCss('color')
235+
).toBe(pageInfo.color)
236+
if (pageInfo.background) {
237+
expect(
238+
await browser
239+
.waitForElementByCss(pageInfo.selector)
240+
.getComputedCss('background-color')
241+
).toBe(pageInfo.background)
242+
}
243+
}
244+
const navigate = async (page) => {
245+
await browser.waitForElementByCss('#' + page).click()
246+
}
247+
await check(start)
248+
for (const page of ordering.slice(1)) {
249+
await navigate(page)
250+
await check(PAGES[page])
251+
}
252+
for (const page of ordering) {
253+
await navigate(page)
254+
await check(PAGES[page])
255+
}
256+
await browser.close()
257+
})
258+
}
259+
}
260+
)
261+
describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
262+
'css-order %s',
263+
(mode: string) => {
264+
const { next, isNextDev } = nextTestSetup(options(mode))
265+
for (const ordering of allPairs) {
266+
const name = `should load correct styles navigating ${ordering.join(
267+
' -> '
268+
)}`
269+
if (mode !== 'turbo') {
216270
if (ordering.some((page) => PAGES[page].conflict)) {
217271
// Conflict scenarios won't support that case
218272
continue
219273
}
220274
// TODO fix this case
221-
const broken =
222-
mode === 'turbo'
223-
? isNextDev
224-
: ordering.some(
225-
(page) =>
226-
PAGES[page].brokenLoading ||
227-
(isNextDev && PAGES[page].brokenLoadingDev)
228-
)
275+
const broken = ordering.some(
276+
(page) =>
277+
PAGES[page].brokenLoading ||
278+
(isNextDev && PAGES[page].brokenLoadingDev)
279+
)
229280
if (broken) {
230281
it.todo(name)
231282
continue
232283
}
233-
it(name, async () => {
234-
const start = PAGES[ordering[0]]
235-
const browser = await next.browser(start.url)
236-
const check = async (pageInfo) => {
237-
expect(
238-
await browser
239-
.waitForElementByCss(pageInfo.selector)
240-
.getComputedCss('color')
241-
).toBe(pageInfo.color)
242-
if (pageInfo.background) {
243-
expect(
244-
await browser
245-
.waitForElementByCss(pageInfo.selector)
246-
.getComputedCss('background-color')
247-
).toBe(pageInfo.background)
248-
}
249-
}
250-
const navigate = async (page) => {
251-
await browser.waitForElementByCss('#' + page).click()
252-
}
253-
await check(start)
254-
for (const page of ordering.slice(1)) {
255-
await navigate(page)
256-
await check(PAGES[page])
257-
}
258-
for (const page of ordering) {
259-
await navigate(page)
260-
await check(PAGES[page])
261-
}
262-
})
263-
}
264-
for (const ordering of allPairs) {
265-
const name = `should load correct styles navigating ${ordering.join(
266-
' -> '
267-
)}`
268-
if (mode !== 'turbo') {
269-
if (ordering.some((page) => PAGES[page].conflict)) {
270-
// Conflict scenarios won't support that case
271-
continue
272-
}
273-
// TODO fix this case
274-
const broken = ordering.some(
275-
(page) =>
276-
PAGES[page].brokenLoading ||
277-
(isNextDev && PAGES[page].brokenLoadingDev)
278-
)
279-
if (broken) {
280-
it.todo(name)
281-
continue
282-
}
283-
} else {
284-
// TODO fix this case
285-
const broken = ordering.some((page) => PAGES[page].brokenLoadingTurbo)
286-
if (broken) {
287-
it.todo(name)
288-
continue
289-
}
290-
}
291-
it(name, async () => {
292-
const start = PAGES[ordering[0]]
293-
const browser = await next.browser(start.url)
294-
const check = async (pageInfo) => {
295-
expect(
296-
await browser
297-
.waitForElementByCss(pageInfo.selector)
298-
.getComputedCss('color')
299-
).toBe(pageInfo.color)
300-
}
301-
const navigate = async (page) => {
302-
await browser.waitForElementByCss('#' + page).click()
303-
}
304-
await check(start)
305-
for (const page of ordering.slice(1)) {
306-
await navigate(page)
307-
await check(PAGES[page])
308-
}
309-
})
310-
}
311-
for (const [page, pageInfo] of Object.entries(PAGES)) {
312-
const name = `should load correct styles on ${page}`
313-
if (mode === 'loose' && pageInfo.conflict) {
314-
// Conflict scenarios won't support that case
284+
} else {
285+
// TODO fix this case
286+
const broken = ordering.some((page) => PAGES[page].brokenLoadingTurbo)
287+
if (broken) {
288+
it.todo(name)
315289
continue
316290
}
317-
it(name, async () => {
318-
const browser = await next.browser(pageInfo.url)
291+
}
292+
it(name, async () => {
293+
const start = PAGES[ordering[0]]
294+
const browser = await next.browser(start.url)
295+
const check = async (pageInfo) => {
319296
expect(
320297
await browser
321298
.waitForElementByCss(pageInfo.selector)
322299
.getComputedCss('color')
323300
).toBe(pageInfo.color)
324-
})
301+
}
302+
const navigate = async (page) => {
303+
await browser.waitForElementByCss('#' + page).click()
304+
}
305+
await check(start)
306+
for (const page of ordering.slice(1)) {
307+
await navigate(page)
308+
await check(PAGES[page])
309+
}
310+
await browser.close()
311+
})
312+
}
313+
}
314+
)
315+
describe.each(process.env.TURBOPACK ? ['turbo'] : ['strict', 'loose'])(
316+
'css-order %s',
317+
(mode: string) => {
318+
const { next } = nextTestSetup(options(mode))
319+
for (const [page, pageInfo] of Object.entries(PAGES)) {
320+
const name = `should load correct styles on ${page}`
321+
if (mode === 'loose' && pageInfo.conflict) {
322+
// Conflict scenarios won't support that case
323+
continue
325324
}
325+
it(name, async () => {
326+
const browser = await next.browser(pageInfo.url)
327+
expect(
328+
await browser
329+
.waitForElementByCss(pageInfo.selector)
330+
.getComputedCss('color')
331+
).toBe(pageInfo.color)
332+
await browser.close()
333+
})
326334
}
327-
)
335+
}
336+
)

0 commit comments

Comments
 (0)