Merge branch 'canary' into update/lockfile-patching

packages/next-swc/crates/core/src/next_dynamic.rs

@@ -223,6 +223,7 @@ impl Fold for NextDynamicPatcher {
  })))];
 
  let mut has_ssr_false = false;
+ let mut has_suspense = false;
 
  if expr.args.len() == 2 {
  if let Expr::Object(ObjectLit {
@@ -250,21 +251,29 @@ impl Fold for NextDynamicPatcher {
  if let Some(Lit::Bool(Bool {
  value: false,
  span: _,
- })) = match &**value {
- Expr::Lit(lit) => Some(lit),
- _ => None,
- } {
+ })) = value.as_lit()
+ {
  has_ssr_false = true
  }
  }
+ if sym == "suspense" {
+ if let Some(Lit::Bool(Bool {
+ value: true,
+ span: _,
+ })) = value.as_lit()
+ {
+ has_suspense = true
+ }
+ }
  }
  }
  }
  props.extend(options_props.iter().cloned());
  }
  }
-
- if has_ssr_false && self.is_server {
+ // Don't need to strip the `loader` argument if suspense is true
+ // See https://github.com/vercel/next.js/issues/36636 for background
+ if has_ssr_false && !has_suspense && self.is_server {
  expr.args[0] = Lit::Null(Null { span: DUMMY_SP }).as_arg();
  }
 

packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/input.js

@@ -9,3 +9,8 @@ const DynamicClientOnlyComponent = dynamic(
  () => import('../components/hello'),
  { ssr: false }
 )
+
+const DynamicClientOnlyComponentWithSuspense = dynamic(
+ () => import('../components/hello'),
+ { ssr: false, suspense: true }
+)

packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-dev.js

@@ -17,3 +17,13 @@ const DynamicClientOnlyComponent = dynamic(()=>import('../components/hello')
  },
  ssr: false
 });
+const DynamicClientOnlyComponentWithSuspense = dynamic(()=>import('../components/hello')
+, {
+ loadableGenerated: {
+ modules: [
+ "some-file.js -> " + "../components/hello"
+ ]
+ },
+ ssr: false,
+ suspense: true
+});

packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-prod.js

@@ -17,3 +17,13 @@ const DynamicClientOnlyComponent = dynamic(()=>import('../components/hello')
  },
  ssr: false
 });
+const DynamicClientOnlyComponentWithSuspense = dynamic(()=>import('../components/hello')
+, {
+ loadableGenerated: {
+ webpack: ()=>[
+ require.resolveWeak("../components/hello")
+ ]
+ },
+ ssr: false,
+ suspense: true
+});

packages/next-swc/crates/core/tests/fixture/next-dynamic/with-options/output-server.js

@@ -16,3 +16,13 @@ const DynamicClientOnlyComponent = dynamic(null, {
  },
  ssr: false
 });
+const DynamicClientOnlyComponentWithSuspense = dynamic(()=>import('../components/hello')
+, {
+ loadableGenerated: {
+ modules: [
+ "some-file.js -> " + "../components/hello"
+ ]
+ },
+ ssr: false,
+ suspense: true
+});

packages/next/build/swc/options.js

@@ -105,7 +105,11 @@ function getBaseSWCOptions({
  }
  : null,
  removeConsole: nextConfig?.compiler?.removeConsole,
- reactRemoveProperties: nextConfig?.compiler?.reactRemoveProperties,
+ // disable "reactRemoveProperties" when "jest" is true
+ // otherwise the setting from next.config.js will be used
+ reactRemoveProperties: jest
+ ? false
+ : nextConfig?.compiler?.reactRemoveProperties,
  modularizeImports: nextConfig?.experimental?.modularizeImports,
  relay: nextConfig?.compiler?.relay,
  emotion: getEmotionOptions(nextConfig, development),

test/e2e/dynamic-with-suspense/index.test.ts

@@ -0,0 +1,55 @@
+import { createNext } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { hasRedbox, renderViaHTTP } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+const suite =
+ process.env.NEXT_TEST_REACT_VERSION === '^17' ? describe.skip : describe
+
+// Skip the suspense test if react version is 17
+suite('dynamic with suspense', () => {
+ let next: NextInstance
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ 'pages/index.js': `
+ import { Suspense } from "react";
+ import dynamic from "next/dynamic";
+ 
+ const Thing = dynamic(() => import("./thing"), { ssr: false, suspense: true });
+ 
+ export default function IndexPage() {
+ return (
+ <div>
+ <p>Next.js Example</p>
+ <Suspense fallback="Loading...">
+ <Thing />
+ </Suspense>
+ </div>
+ );
+ }
+ `,
+ 'pages/thing.js': `
+ export default function Thing() {
+ return "Thing";
+ }
+ `,
+ },
+ dependencies: {},
+ })
+ })
+ afterAll(() => next.destroy())
+
+ it('should render server-side', async () => {
+ const html = await renderViaHTTP(next.url, '/')
+ expect(html).toContain('Next.js Example')
+ expect(html).toContain('Thing')
+ })
+
+ it('should render client-side', async () => {
+ const browser = await webdriver(next.url, '/')
+ expect(await hasRedbox(browser)).toBe(false)
+ await browser.close()
+ })
+})

test/production/jest/remove-react-properties/app/jest.config.js

@@ -0,0 +1,20 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+ dir: './',
+})
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+ // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+ moduleDirectories: ['node_modules', '<rootDir>/'],
+ testEnvironment: 'jest-environment-jsdom',
+ moduleNameMapper: {
+ // When changing these, also look at the tsconfig!
+ '^types/(.+)$': '<rootDir>/types/$1',
+ },
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

test/production/jest/remove-react-properties/app/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+ compiler: {
+ reactRemoveProperties: true,
+ },
+}

test/production/jest/remove-react-properties/app/pages/index.js

@@ -0,0 +1,3 @@
+export default function Index() {
+ return <div data-testid="main-text">Hello World</div>
+}

test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts

@@ -0,0 +1,62 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+import path from 'path'
+
+const appDir = path.join(__dirname, 'app')
+
+describe('next/jest', () => {
+ let next: NextInstance
+
+ if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
+ // react testing library is specific to react version
+ it('should bail on react v17', () => {})
+ return
+ }
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: {
+ pages: new FileRef(path.join(appDir, 'pages')),
+ 'tests/index.test.js': `
+ import { render as renderFn, waitFor } from '@testing-library/react'
+ import '@testing-library/jest-dom/extend-expect';
+
+ import Page from '../pages'
+
+ describe('testid', () => {
+ it('data-testid should be available in the test', async () => {
+ const { getByTestId } = renderFn(
+ <Page />
+ )
+ expect(getByTestId('main-text')).toHaveTextContent('Hello World')
+ })
+ })
+ 
+ `,
+ 'jest.config.js': new FileRef(path.join(appDir, 'jest.config.js')),
+ 'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
+ },
+ dependencies: {
+ jest: '27.4.7',
+ '@testing-library/react': '^13.1.1',
+ jsdom: '^19.0.0',
+ '@testing-library/jest-dom': '5.16.4',
+ },
+ packageJson: {
+ scripts: {
+ // Runs jest and bails if jest fails
+ build: 'yarn jest --forceExit tests/index.test.js && yarn next build',
+ },
+ },
+ buildCommand: `yarn build`,
+ })
+ })
+ afterAll(() => next.destroy())
+
+ it('data-testid should be removed in production', async () => {
+ const html = await renderViaHTTP(next.appPort, '/')
+
+ expect(html).not.toContain('data-testid')
+ })
+})