Application error in production build but not dev mode in next@13.4.12

[peterolson]

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Enterprise
    Binaries:
      Node: 16.15.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

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

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/peterolson/next-cytoscape-bug

To Reproduce

Clone the repository at https://github.com/peterolson/next-cytoscape-bug and run npm install, next build and next start.

Uses the following dependency:

"cytoscape": "^3.25.0"

Relevant code as follows:

import { useEffect, useRef } from "react";
import cytoscape from 'cytoscape';

/** Add your relevant code here for the issue to reproduce */
export default function Home() {
  const graphNode = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!graphNode.current) return;
    cytoscape({
      container: graphNode.current,
      elements: [
        { data: { id: "a" } },
        { data: { id: "b" } },
        {
          data: {
            id: "ab",
            source: "a",
            target: "b",
          },
        },
      ]
    });
  }, [graphNode]);

  return <div ref={graphNode} style={{ width: 100, height: 100 }} />
}

Describe the Bug

Page renders two-node graph as expected with next dev development mode.

When running in production mode using next build and next start, I get this error:

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

with the following error in the browser console:

TypeError: this.selectionType is not a function

The error does not appear in next version 13.4.8 or below.

Expected Behavior

The expected behavior is seen when running next dev or by using next version 13.4.8 or below.

The following two-node graph should be rendered without any errors:

Which browser are you using? (if relevant)

Microsoft Edge Version 115.0.1901.183

How are you deploying your application? (if relevant)

next start

[reductio]

Same here. Seems to be a problem with imports. For me I see that an import, that before was an object like { a: fn(), b:() } is now { default: { a: fn(), b: fn() }}, so the destructuring doesn't work as before, explaining the "is not a function" error.

[lms11]

Downgrading next version fixed for me locally in prod environment. Dev environment always worked.

Interestingly, deploying to Vercel still doesn't work. Somehow their build is different than building locally.

[kdy1]

This will be fixed by swc-project/swc#7702

[github-actions]

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