diff --git a/crates/napi/src/minify.rs b/crates/napi/src/minify.rs index 4856c7d6f942f..9fd04e41576d1 100644 --- a/crates/napi/src/minify.rs +++ b/crates/napi/src/minify.rs @@ -111,8 +111,8 @@ fn patch_opts(opts: &mut JsMinifyOptions) { opts.compress = BoolOrDataConfig::from_obj(TerserCompressorOptions { inline: Some(TerserInlineOption::Num(2)), global_defs: [( - "process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE".into(), - "production".into(), + "process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE".into(), + false.into(), )] .iter() .cloned() diff --git a/crates/next-custom-transforms/src/transforms/optimize_server_react.rs b/crates/next-custom-transforms/src/transforms/optimize_server_react.rs index 64590d3631974..7209e6d5ea9f9 100644 --- a/crates/next-custom-transforms/src/transforms/optimize_server_react.rs +++ b/crates/next-custom-transforms/src/transforms/optimize_server_react.rs @@ -62,8 +62,8 @@ fn effect_has_side_effect_deps(call: &CallExpr) -> bool { fn wrap_expr_with_env_prod_condition(call: CallExpr) -> Expr { // Wrap the call expression with the condition - // turn it into `process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE` && . - // And `process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE`` will be treated as `false` in + // turn it into `process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && `. + // And `process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE` will be treated as `false` in // minification. In this way the expression and dependencies are still available in // compilation during bundling, but will be removed in the final DEC. Expr::Bin(BinExpr { @@ -75,7 +75,6 @@ fn wrap_expr_with_env_prod_condition(call: CallExpr) -> Expr { span: DUMMY_SP, ..Default::default() }))), - prop: MemberProp::Ident(IdentName { sym: "env".into(), span: DUMMY_SP, @@ -83,7 +82,7 @@ fn wrap_expr_with_env_prod_condition(call: CallExpr) -> Expr { span: DUMMY_SP, }))), prop: (MemberProp::Ident(IdentName { - sym: "__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE".into(), + sym: "__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE".into(), span: DUMMY_SP, })), span: DUMMY_SP, diff --git a/crates/next-custom-transforms/tests/fixture/optimize_server_react/1/output.js b/crates/next-custom-transforms/tests/fixture/optimize_server_react/1/output.js index 9e46707814434..11df359cceb27 100644 --- a/crates/next-custom-transforms/tests/fixture/optimize_server_react/1/output.js +++ b/crates/next-custom-transforms/tests/fixture/optimize_server_react/1/output.js @@ -1,10 +1,10 @@ import { useEffect, useLayoutEffect, useMemo } from 'react'; import React from 'react'; export default function App() { - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{ console.log('Hello World'); }, []); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useLayoutEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{ function foo() {} return ()=>{}; }, [ @@ -24,7 +24,7 @@ export default function App() { const a = useMemo(()=>{ return 1; }, []); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && React.useEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && React.useEffect(()=>{ console.log('Hello World'); }); return
diff --git a/crates/next-custom-transforms/tests/fixture/optimize_server_react/2/output.js b/crates/next-custom-transforms/tests/fixture/optimize_server_react/2/output.js index a45bed4f4b8e5..3593e7f866d69 100644 --- a/crates/next-custom-transforms/tests/fixture/optimize_server_react/2/output.js +++ b/crates/next-custom-transforms/tests/fixture/optimize_server_react/2/output.js @@ -16,7 +16,7 @@ export default function FilterItemDropdown({ list }) { ()=>null ]; const ref = useRef(null); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{ const handleClickOutside = (event)=>{ if (ref.current && !ref.current.contains(event.target)) { setOpenSelect(false); @@ -25,7 +25,7 @@ export default function FilterItemDropdown({ list }) { window.addEventListener('click', handleClickOutside); return ()=>window.removeEventListener('click', handleClickOutside); }, []); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{ list.forEach((listItem)=>{ if ('path' in listItem && pathname === listItem.path || 'slug' in listItem && searchParams.get('sort') === listItem.slug) { setActive(listItem.title); diff --git a/crates/next-custom-transforms/tests/fixture/optimize_server_react/4/output.js b/crates/next-custom-transforms/tests/fixture/optimize_server_react/4/output.js index 835aae43cfbab..a46a22bda4cbd 100644 --- a/crates/next-custom-transforms/tests/fixture/optimize_server_react/4/output.js +++ b/crates/next-custom-transforms/tests/fixture/optimize_server_react/4/output.js @@ -5,7 +5,7 @@ export default function App() { useEffect(()=>{ console.log('Hello World'); }, []); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useLayoutEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{ function foo() {} return ()=>{}; }, [ diff --git a/crates/next-custom-transforms/tests/fixture/optimize_server_react/6/output.js b/crates/next-custom-transforms/tests/fixture/optimize_server_react/6/output.js index 0d05a9dd34bd0..24149bef2a20f 100644 --- a/crates/next-custom-transforms/tests/fixture/optimize_server_react/6/output.js +++ b/crates/next-custom-transforms/tests/fixture/optimize_server_react/6/output.js @@ -5,7 +5,7 @@ const Component = ({ children, fallback })=>{ false, ()=>null ]; - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useEffect(()=>setMounted(true), []); + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>setMounted(true), []); if (!mounted) { return fallback ?? /* @__PURE__ */ jsx(Fragment, {}); } diff --git a/crates/next-custom-transforms/tests/fixture/optimize_server_react/7/output.js b/crates/next-custom-transforms/tests/fixture/optimize_server_react/7/output.js index 372b80ad7fbdd..161635a819760 100644 --- a/crates/next-custom-transforms/tests/fixture/optimize_server_react/7/output.js +++ b/crates/next-custom-transforms/tests/fixture/optimize_server_react/7/output.js @@ -1,10 +1,10 @@ import { useEffect, useLayoutEffect, useMemo } from 'react'; import * as React from 'react'; export default function App() { - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{ console.log('Hello World'); }, []); - process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE && useLayoutEffect(()=>{ + process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{ function foo() {} return ()=>{}; }, [ diff --git a/packages/next/src/build/webpack/plugins/minify-webpack-plugin/src/index.ts b/packages/next/src/build/webpack/plugins/minify-webpack-plugin/src/index.ts index 8c731879a323b..0973145ba271b 100644 --- a/packages/next/src/build/webpack/plugins/minify-webpack-plugin/src/index.ts +++ b/packages/next/src/build/webpack/plugins/minify-webpack-plugin/src/index.ts @@ -109,11 +109,7 @@ export class MinifyPlugin { }, } : {}), - compress: { - global_defs: { - 'process.env.__NEXT_PRIVATE_MINIMIZE_MARCO_FALSE': false, - }, - }, + compress: true, mangle: true, module: 'unknown', output: { diff --git a/test/production/optimize-server-react/optimize-server-react.test.ts b/test/production/optimize-server-react/optimize-server-react.test.ts new file mode 100644 index 0000000000000..f59792e0889a6 --- /dev/null +++ b/test/production/optimize-server-react/optimize-server-react.test.ts @@ -0,0 +1,19 @@ +import { nextTestSetup } from 'e2e-utils' +;(process.env.TURBOPACK ? describe.skip : describe)( + 'optimize-server-react', + () => { + const { next } = nextTestSetup({ + files: __dirname, + }) + + it('should work with useEffect', async () => { + const browser = await next.browser('/') + expect(await browser.elementByCss('p').text()).toBe('hello world') + }) + + it('should optimize useEffect call on server side', async () => { + const file = await next.readFile('.next/server/pages/index.js') + expect(file).not.toContain('useEffect') + }) + } +) diff --git a/test/production/optimize-server-react/pages/index.tsx b/test/production/optimize-server-react/pages/index.tsx new file mode 100644 index 0000000000000..8eccd43edf4ed --- /dev/null +++ b/test/production/optimize-server-react/pages/index.tsx @@ -0,0 +1,13 @@ +import { useEffect } from 'react' + +export default function Page() { + useEffect(() => { + console.log('use-effect-call-log') + }, []) + return

hello world

+} + +// Mark as dynamic +export function getServerSideProps() { + return { props: {} } +}