bug: SyntaxError: Unexpected token 'export' with Next.js

[christianidas]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When updating to Ionic 6 and trying to run the app, I get this error, ServiceError: Unexpected token 'export'.

index.js?4755:323 Uncaught     at <path-to-my-app>/node_modules/ (ionic/core/components/index.js:4)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (file:///<path-to-my-app>/node_modules/@ionic/react/dist/index.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

Previously, my app was using Ionic 5 with Next.js. Following the guidelines to migrate to Ionic 6, The only thing I've changed was to add the setupIonicReact() call as noted as required in v6. Without adding this call, the app still fails to load. The same error just manifests differently.

Expected Behavior

Expected to update from Ionic 5 to Ionic 6 and still run successfully.

Steps to Reproduce

Add Ionic 6 to Next.js project.

Code Reproduction URL

No response

Ionic Info

I am not using Ionic CLI for anything as this is a Next.js app. I am only using Ionic as a UX framework.

[WARN] You are not in an Ionic project directory. Project context may be
       missing.

Ionic:

   Ionic CLI : 6.18.1

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.13.1
   npm    : 8.1.2
   OS     : Linux 5.11

Additional Information

As mentioned, I am not using Ionic CLI for anything as this is a Next.js app. I am only using Ionic as a UX framework. I am trying to use @ionic/react for styling and components only.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[liamdebeasi]

Thanks for the issue. Can you please reproduce this in a GitHub repo and provide a link to it?

[christianidas]

@liamdebeasi Here is a repo where I was able to reproduce the issue with a brand new Next.js app using create-next-app, and added the Ionic 6 modules.
https://github.com/christianidas/next-ionic-demo

[liamdebeasi]

Thanks! I am getting the following error:

error - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc

I tried the suggestion on the link included in the error, but no luck. Any ideas?

[christianidas]

Can you try removing the package-lock.json and yarn.lock files and the node modules and try again? There may be a module I have locked in that doesn't work with your system.