next build produces incorrect JavaScript code

[larsgw]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Debian 6.0.12-1~bpo11+1 (2022-12-19)
    Binaries:
      Node: 16.19.0
      npm: 9.6.5
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.19
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.3.1-canary.19", newest: "13.3.1".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

Script optimization (next/script)

Link to the code that reproduces this issue

https://github.com/larsgw/next-js-compile-issue-mcve

To Reproduce

• Run npm run build
• Run npm run start
• Go to http://localhost:3000
• Open the Developer Tools/JavaScript Console
• Click the button labeled Click to test

Describe the Bug

This will (currently) produce an error like this one:

framework-e2bd64861297ca18.js:9
Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
    at onClick (index-572eab17bd5f8a7d.js:1:349)
    at Object.eU (framework-e2bd64861297ca18.js:9:14912)
    at eH (framework-e2bd64861297ca18.js:9:15066)
    at framework-e2bd64861297ca18.js:9:33374
    at re (framework-e2bd64861297ca18.js:9:33473)
    at rn (framework-e2bd64861297ca18.js:9:33887)
    at framework-e2bd64861297ca18.js:9:39345
    at oP (framework-e2bd64861297ca18.js:9:96345)
    at eF (framework-e2bd64861297ca18.js:9:14046)
    at ro (framework-e2bd64861297ca18.js:9:35178)

That is because the code is transformed to the following:

function(n, t, u) {
    "use strict";
    u.r(t),
    u.d(t, {
        default: function() {
            return e
        }
    });
    var c = u(5893);
    function e() {
        return (0,
        c.jsx)(c.Fragment, {
            children: (0,
            c.jsx)("button", {
                onClick: ()=>{
                    var n;
                    n = n.slice()
                }
                ,
                children: "Click to test"
            })
        })
    }
}

Note specifically how the function foo in the original code:

function foo (arg) {
  var arg = arg.slice()
}

is incorrectly optimised:

()=>{
  var n;
  n = n.slice()
}

Expected Behavior

I would expect that next build does not introduce such errors in the code.

Which browser are you using? (if relevant)

Google Chrome 111.0.5563.146 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

next start

[larsgw]

To be fair, I would not have guessed that the following function would work, but it does.

(n)=>{
  var n;
  n = n.slice()
}

[icyJoseph]

Most likely an SWC issue.

Check this playground, it works fine there, but if we switch the target to ES2015, or later, then it does it as you describe. We should take this issue to the SWC repository.

Edit

It seems like the compress step is causing the issue.

[larsgw]

Maybe related to swc-project/swc#6419 then

[larsgw]

I've opened swc-project/swc#7331. I can also sometimes reproduce it with ES5, but I am not sure when. I have the feeling that the playground does not always work as I expect.

[icyJoseph]

Nice! Hopefully this example can be fixed. Typically the SWC maintainer can do a lot more with such concise snippets, make a test and fix the compression. Let's be patient.

[larsgw]

It looks like a fix was released in SWC.

[github-actions]

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.