Bad next build when using new JSX transform & NODE_ENV=development

[AsherFoster]

Bug report

Describe the bug

When creating a production build in development (Weird use case, I know, but I use this to test a compiled app with development settings), next appears to be confused about whether to use jsx or jsxDEV.

The app appears to have SSG rendered fine (I get a brief flash of content,) however when hydration is triggered on the client, the #__next div is emptied, and an infinite error loop occurs. Thousands of TypeError: Object(...) is not a function (Object(o.jsxDEV)(...) in source) errors appear in the console.

I don't know how next handles the JSX transform, but my guess is next build doesn't include jsxDEV on the client, somehow breaking the app.

Full trace

TypeError: Object(...) is not a function
    at r.default (_app-b6e6c2c671f93d19d381.js:1)
    at no (framework.4ed712e956e4440973f2.js:1)
    at ju (framework.4ed712e956e4440973f2.js:1)
    at xi (framework.4ed712e956e4440973f2.js:1)
    at Si (framework.4ed712e956e4440973f2.js:1)
    at ki (framework.4ed712e956e4440973f2.js:1)
    at pi (framework.4ed712e956e4440973f2.js:1)
    at ii (framework.4ed712e956e4440973f2.js:1)
    at Ki (framework.4ed712e956e4440973f2.js:1)
    at framework.4ed712e956e4440973f2.js:1

Compiled source:

r.default = function(e) {
  var r = e.Component
    , t = e.pageProps;

  // Error occurs here:

  return Object(o.jsxDEV)(r, function(e) {
    for (var r = 1; r < arguments.length; r++) {
      var t = null != arguments[r] ? arguments[r] : {};
      r % 2 ? c(Object(t), !0).forEach((function(r) {
          n(e, r, t[r])
        }
      )) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : c(Object(t)).forEach((function(r) {
          Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r))
        }
      ))
    }
    return e
  }({}, t), void 0, !1, {
    fileName: "[...]/jsxdev-repro/pages/_app.js",
    lineNumber: 4,
    columnNumber: 10
  }, this)
}

To Reproduce

Pretty straightforward to reproduce:

npx create-next-app jsxdev-repro
cd jsxdev-repro
NODE_ENV=development npm run build
npm start

Open site in a browser

Expected behavior

• Client should correctly compile with jsx or jsxDEV
• Hydration should not fail into a blank page state
• Hydration should not enter an infinite loop

Screenshots

System information

• macOS
• Tested in firefox & chrome
• Next 10.0.1
• React(-dom) 17.0.1
• Node 14.13

Additional context

Add any other context about the problem here.

[Timer]

It sounds like Next.js is accidentally allowing you to configure NODE_ENV=development when it should be forcing production for next build. We can look into this.

[ChrisSargent]

I was having a similar issue resulting in the following error when building:

Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
TypeError: ReactJSXRuntimeDev.jsxDEV is not a function

Setting NODE_ENV=production on the build script commands manually solved it for now.

[matthewdavidson]

I've encountered some related issues when using NODE_ENV=test in conjunction with next build.

Here is a reproduction repo: https://github.com/matthewdavidson/nextjs-nodenv-test-repro

Downgrading react 17 to 16 fixes @AsherFoster's original issue, but a separate issue exists with IE11 support:

The generated output from a NODE_ENV=test next build is incompatible with IE11 (arrow functions are left intact etc).

[anestesya]

I've encountered some related issues when using NODE_ENV=test in conjunction with next build.

Here is a reproduction repo: https://github.com/matthewdavidson/nextjs-nodenv-test-repro

Downgrading react 17 to 16 fixes @AsherFoster's original issue, but a separate issue exists with IE11 support:

The generated output from a NODE_ENV=test next build is incompatible with IE11 (arrow functions are left intact etc).

worked for me, export NODE_ENV=test, before NODE_ENV=production

[TopHatMan]

This is broken again with latest react, react-dom , and nextjs. I downgraded to the ver in that repo and now its fixed.
I am forced to do NODE_ENV=production for build and start.

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