Static pages render but React not mounting client-side in Production mode. Works in dev.

[neilpoulin]

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

16.11.1

What browser are you using?

Brave, Chrome, Safari

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

Prior to Next 12, building a production bundle and running the server via next start worked great. Most of my pages are static, and a handful are server-side-rendered.

After upgrading, running next dev continues to work well but running next build followed by next start results in a non-interactive application. There are no build errors or warnings, and the app starts up fine. I can render my home page and even navigate via link in my menubar (next/links). All styles appear correct.

However, none of the interactions powered by javascript are present. I added logging in the render function of my pages and I see the log statements when building the app (static pages) and in the server logs when hitting that route for server-side-rendered pages, but none of the pages appear to mount the react application on the client. I don't see any logging, or can i interact with javascript-powered components (dropdown menus, etc).

I do have a custom _document.tsx page in order to server-side render Material UI styles, and a custom _app.tsx page that adds things like Redux Providers, etc. I actually tried removing both of those pages and using the default Next pages, but I still was not able to get any log statements to print out in the browser from inside a render function.

I do not have any custom babel configuration, nor any custom webpack configs. My various config files are below.

I'm totally stumped by this. See the repo below to reproduce the issue.

Expected Behavior

The production build should behave exactly like the dev build, which should behave exactly like the test build.

To Reproduce

Edit: here's a repo that reproduces the issue. While creating the repo, I learned a few things:

• I'm pretty sure this issue is caused by pulling in a particular dependency, in this case yup.

• The app behaves differently when building in Dev, Test, and Production modes (via NODE_ENV=test|production|development)

• [dev] next dev -> app works as expected. No broken behavior, no build warnings, no console logs, everything is great.

• [test] NODE_ENV=test next build && NODE_ENV=test next start -> app builds with no warnings/errors and all pages render, but there is no interaction available. The app doesn't seem to "mount". No errors in the browser or server.

• [prod] next build && next start -> App builds fine, no warnings/errors. When loading the page in the browser content flashes, then a generic Next error screen appears:

  Application error: a client-side exception has occurred (see the browser console for more information).

  Checking the browser console reveals a ReferenceError: excludeEmptyString is not defined ultimately coming from the yup library.

[neilpoulin]

Updated my initial report to link to a repository that reproduces the issue along with some additional things I noticed while creating the reproduction example repo.

[timneutkens]

Looking at the report (didn't run the repro yet) this seems to be related to swcMinify, could you try running the app with swcMinify: false?

[neilpoulin]

You're right, disabling swcMinify by setting it to false solves the issue. Note: I also tried Next v12.0.2, but this issue still remains when swcMinify is enabled.

edit: setting swcMinify continues to work when running next build but not when running NODE_ENV=test next build. That is to say, it seems that things are working OK in development and production modes, but not test.

[padmaia]

Here is a narrower reproduction for you @kdy1 :

Input

function string_create() {
  return new StringSchema();
}
class StringSchema extends BaseSchema {

  matches(regex, options) {
    let excludeEmptyString = false;
    let message;
    let name;

    if (options) {
      if (typeof options === 'object') {
        ({
          excludeEmptyString = false,
          message,
          name
        } = options);
      } else {
        message = options;
      }
    }

    return this.test({
      name: name || 'matches',
      message: message || string.matches,
      params: {
        regex
      },
      test: value => isAbsent(value) || value === '' && excludeEmptyString || value.search(regex) !== -1
    });
  }

}
string_create.prototype = StringSchema.prototype;

Output (mangled and compressed)

function string_create(){return new StringSchema()}class StringSchema extends BaseSchema{matches(a,b){let c,d;return b&&("object"==typeof b?{excludeEmptyString=!1,message:c,name:d}=b:c=b),this.test({name:d||"matches",message:c||string.matches,params:{regex:a},test:b=>isAbsent(b)|| -1!==b.search(a)})}}string_create.prototype=StringSchema.prototype

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