deploying to Vercel causes conditional statements to evaluate incorrectly

Bug report

Describe the bug

When rendering a page using Incremental Static Regeneration a *conditional statement is erroneously applied to the wrong element.

*I’m referring to conditional rendering expressions of the following form:

<div>
   {true && <div />}
   <div />
</div>

To Reproduce

1. go to my repo, https://github.com/AHBruns/vercel-repro
2. clone it, npm install, and *npm run dev
3. inspect element
4. you’ll see the following, which is correct:

<div>
   <div class="SHOW"></div>
</div>

1. deploy the repo to Vercel
2. go to the deployed site
3. inspect element
4. you’ll see the following, which is incorrect:

<div>
   <div class="NO_SHOW"></div>
</div>

*npm run build && npm run start yields the same problem

Expected behavior

A single div with the class SHOW should be added to the DOM regardless of the environment.

System information

• Version of Next.js: v9.5.2
• Version of Node.js: v14.3.0

[timneutkens]

Did some investigating:

• Added a next.config.js with target: 'experimental-serverless-trace'
• Ran next build
• The console.log in _app logged out /404 which is unexpected

So this is definitely a bug in Next.js, we’ll fix it 🙏

[ijjk]

Hi, this should be fixed in v9.5.4-canary.16 of Next.js please upgrade and give it a try!