deploying to Vercel causes conditional statements to evaluate incorrectly

[AHBruns]

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>

5. deploy the repo to Vercel
6. go to the deployed site
7. inspect element
8. 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

[Timer]

Could you please upgrade to next@canary and try this again? We've fixed a lot of CSS-related things in the newest canary.

[AHBruns]

Could you please upgrade to next@canary and try this again? We've fixed a lot of CSS-related things in the newest canary.

Okay. Just did this, and the problem persists.

[AHBruns]

I should add that this isn't really CSS related. It seems like the conditional statement is being applied to the wrong element somehow. The CSS was just to illustrate that.

[Timer]

Thanks, we'll take a peek soon!

[AHBruns]

My original example had a lot going on. I made a clean new repo and was able to build up to triggering the bug.

reproduction repo

It seems to be related to rendering pages that use Incremental Static Regeneration. I still can't identify why the conditional is being applied to the wrong element because it's a completely silent error (AFAIK even if the boolean was flipped the result I'm getting from Vercel would still be impossible).

Interestingly, the only valid evaluations of the following code

are:

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

or

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

However, the Vercel page is the following:

which should be impossible. Hence, this probably has to be a problem in either how Vercel transpiles my code or how the browser interprets the transpiled code. Because I've tested a couple different browsers and found the same problem across all of them, it seems to me that Vercel's transpiler likely has a bug.

[AHBruns]

My original example had a lot going on. I made a clean new repo and was able to build up to triggering the bug.

reproduction repo

It seems to be related to rendering pages that use Incremental Static Regeneration. I still can't identify why the conditional is being applied to the wrong element because it's a completely silent error (AFAIK even if the boolean was flipped the result I'm getting from Vercel would still be impossible).

Interestingly, the only valid evaluations of the following code

are:

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

or

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

However, the Vercel page is the following:

which should be impossible. Hence, this probably has to be a problem in either how Vercel transpiles my code or how the browser interprets the transpiled code. Because I've tested a couple different browsers and found the same problem across all of them, it seems to me that Vercel's transpiler likely has a bug.

Rewrote the bug report to reference this reproduction.

[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 🙏

[AHBruns]

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 🙏

Sounds good. Thank you for the quick response!

[ijjk]

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

[AHBruns]

Thanks a million! I'll confirm everything is fixed when I get home evening.

[vikasg603]

Hey, i am using "next": "^10.0.7"
I am getting the same issue with my conditional rendering code.

Is there any way to resolve this?

[vikasg603]

It's just that I am getting this issue in dev mode, and only if I am refreshing the page or either going to that page directly.
There is no issue if I am going on that particular page from another page.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.