Next.js app is broken after recently swc upgrade

[chentsulin]

Describe the bug

When we updated our apps from [email protected] to [email protected] (canary.8 can not be found on npm), the minified outputs started to be incorrect. The most suspicious commit is this swc update: vercel/next.js#40832

After debugging, I found this bug is related to output for modern browsers:

  experimental: {
    browsersListForSwc: true,
    legacyBrowsers: false,
  },

The bug is not preset when legacyBrowsers sets to true:

  experimental: {
    browsersListForSwc: true,
    legacyBrowsers: true,
  },

Input code

https://github.com/vercel/next.js/blob/f7ce8eceb7a76e6758a9d236ad9711440fb2bb12/packages/next/client/index.tsx#L67

Config

No response

Playground link

No response

Expected behavior

Be minified correctly.

Actual behavior

Uncaught ReferenceError: Cannot access 'C' before initialization
    at 36330 (index.js:36:18)
    at d (webpack-705e5ebf60736dcf.js:1:167)
    at 9043 (next.js:3:8)
    at d (webpack-705e5ebf60736dcf.js:1:167)
    at resolve-rewrites:1:1
    at d.O (webpack-705e5ebf60736dcf.js:1:593)
    at resolve-rewrites:1:1
    at c (webpack-705e5ebf60736dcf.js:1:3907)
    at <anon>:1:61

Due to

t.router=C;
let j=u.default();
t.emitter=j;
let O=e=>[].slice.call(e),C,R,M,A,L,T,I,N,k,D,B,U,q=!1;

from the minified output:

(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[179],{18282:function(e,t){"use strict";function r(e,t,r,n,a,o,i){try{var l=e[o](https://github.com/Dcard/Dcard-Web/pull/i),s=l.value}catch(u){r(u);return}l.done?t(s):Promise.resolve(s).then(n,a)}t.Z=function(e){return function(){var t=this,n=arguments;return new Promise(function(a,o){var i=e.apply(t,n);function l(e){r(i,a,o,l,s,"next",e)}function s(e){r(i,a,o,l,s,"throw",e)}l(void 0)})}}},59419:function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}t.Z=function(){return r.apply(this,arguments)}},23903:function(e,t){"use strict";t.Z=function(e){return e&&e.__esModule?e:{default:e}}},30199:function(e,t){"use strict";function r(e){if("function"!=typeof WeakMap)return null;var t=new WeakMap,n=new WeakMap;return(r=function(e){return e?n:t})(e)}t.Z=function(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var n=r(t);if(n&&n.has(e))return n.get(e);var a={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if("default"!==i&&Object.prototype.hasOwnProperty.call(e,i)){var l=o?Object.getOwnPropertyDescriptor(e,i):null;l&&(l.get||l.set)?Object.defineProperty(a,i,l):a[i]=e[i]}return a.default=e,n&&n.set(e,a),a}},15154:function(e,t){"use strict";t.Z=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}},11541:function(){"trimStart"in String.prototype||(String.prototype.trimStart=String.prototype.trimLeft),"trimEnd"in String.prototype||(String.prototype.trimEnd=String.prototype.trimRight),"description"in Symbol.prototype||Object.defineProperty(Symbol.prototype,"description",{configurable:!0,get:function(){var e=/((.*))/.exec(this.toString());return e?e[1]:void 0}}),Array.prototype.flat||(Array.prototype.flat=function(e,t){return t=this.concat.apply([],this),e>1&&t.some(Array.isArray)?t.flat(e-1):t},Array.prototype.flatMap=function(e,t){return this.map(e,t).flat()}),Promise.prototype.finally||(Promise.prototype.finally=function(e){if("function"!=typeof e)return this.then(e,e);var t=this.constructor||Promise;return this.then(function(r){return t.resolve(e()).then(function(){return r})},function(r){return t.resolve(e()).then(function(){throw r})})}),Object.fromEntries||(Object.fromEntries=function(e){return Array.from(e).reduce(function(e,t){return e[t[0]]=t[1],e},{})})},73952:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addBasePath=function(e,t){return a.normalizePathTrailingSlash(n.addPathPrefix(e,""))};var n=r(11077),a=r(60583);("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},94400:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.addLocale=void 0,r(60583);let n=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];return e};t.addLocale=n,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},36497:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.detectDomainLocale=void 0;let r=function(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r]};t.detectDomainLocale=r,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},7446:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.hasBasePath=function(e){return n.pathHasPrefix(e,"")};var n=r(20832);("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},27029:function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return{mountedInstances:new Set,updateHead(e){let t={};e.forEach(e=>{if("link"===e.type&&e.props["data-optimized-fonts"]){if(document.querySelector('style[data-href="'.concat(e.props["data-href"],'"]')))return;e.props.href=e.props["data-href"],e.props["data-href"]=void 0}let r=t[e.type]||[];r.push(e),t[e.type]=r});let r=t.title?t.title[0]:null,o="";if(r){let{children:i}=r.props;o="string"==typeof i?i:Array.isArray(i)?i.join(""):""}o!==document.title&&(document.title=o),["meta","base","link","style","script"].forEach(e=>{(function(e,t){let r=document.getElementsByTagName("head")[0],o=r.querySelector("meta[name=next-head-count]"),i=Number(o.content),l=[];for(let s=0,u=o.previousElementSibling;s<i;s++,u=(null==u?void 0:u.previousElementSibling)||null){var c;(null==u?void 0:null==(c=u.tagName)?void 0:c.toLowerCase())===e&&l.push(u)}let d=t.map(n).filter(e=>{for(let t=0,r=l.length;t<r;t++){let n=l[t];if(a(n,e))return l.splice(t,1),!1}return!0});l.forEach(e=>{var t;return null==(t=e.parentNode)?void 0:t.removeChild(e)}),d.forEach(e=>r.insertBefore(e,o)),o.content=(i-l.length+d.length).toString()})(e,t[e]||[])})}}},t.isEqualNode=a,t.DOMAttributeNames=void 0;let r={acceptCharset:"accept-charset",className:"class",htmlFor:"for",httpEquiv:"http-equiv",noModule:"noModule"};function n(e){let{type:t,props:n}=e,a=document.createElement(t);for(let o in n){if(!n.hasOwnProperty(o)||"children"===o||"dangerouslySetInnerHTML"===o||void 0===n[o])continue;let i=r[o]||o.toLowerCase();"script"===t&&("async"===i||"defer"===i||"noModule"===i)?a[i]=!!n[o]:a.setAttribute(i,n[o])}let{children:l,dangerouslySetInnerHTML:s}=n;return s?a.innerHTML=s.__html||"":l&&(a.textContent="string"==typeof l?l:Array.isArray(l)?l.join(""):""),a}function a(e,t){if(e instanceof HTMLElement&&t instanceof HTMLElement){let r=t.getAttribute("nonce");if(r&&!e.getAttribute("nonce")){let n=t.cloneNode(!0);return n.setAttribute("nonce",""),n.nonce=r,r===e.nonce&&e.isEqualNode(n)}}return e.isEqualNode(t)}t.DOMAttributeNames=r,("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},36330:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});let n=r(30199).Z;Object.defineProperty(t,"__esModule",{value:!0}),t.initialize=function(){return W.apply(this,arguments)},t.hydrate=function(e){return en.apply(this,arguments)},t.emitter=t.router=t.version=void 0;var a=r(18282).Z,o=r(59419).Z,i=r(23903).Z;r(30199).Z,r(11541);var l=i(r(2784)),s=r(77188),u=i(r(8744)),c=r(33220),d=r(39032),f=r(62519),h=r(96112),p=r(34750),m=r(51218),g=i(r(27029)),y=i(r(53682)),v=i(r(54861)),_=r(96096),P=r(93642),b=r(10274),S=r(20001),w=r(74293),E=r(7446);let x=r(17029);t.version="12.3.2-canary.12",t.router=C;let j=u.default();t.emitter=j;let O=e=>[].slice.call(e),C,R,M,A,L,T,I,N,k,D,B,U,q=!1;

Version

[email protected]+

Additional context

No response

[kdy1]

Can you share some more information?

e.g. Do you need swcMinify: true to reproduce this?

[kdy1]

Also, can you provide a repro case?

[kdy1]

I looked at 8a5ed1e...main but I concluded I need more info

[chentsulin]

Yes. swcMinify: true is needed to reproduce this problem.
The error is gone after setting swcMinify: false.

Still trying to provide a simplified repro case.

[chentsulin]

Is there an approach to print out current swc config in a nextjs project?

[kdy1]

You need to monkey-patch next/build/swc in your node modules. https://github.com/vercel/next.js/blob/2df817ceb9c564e3693f9588b8ddf2e6b60088e8/packages/next/build/swc/index.js

[chentsulin]

Hi @kdy1
I reproduced this problem with a newly created Next.js app by using create-next-app:
https://github.com/chentsulin/swc-issue-5989-swc-minify

And the repro steps are written on the readme file.

[kdy1]

Thanks! I reproduced and seems like it's an issue of minifier targeting es2015+

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.