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

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.

[liamdebeasi]

The issue mentioned in https://github.com/ionic-team/ionic-framework/issues/24481#issuecomment-1017027881 is caused by https://github.com/ionic-team/stencil/issues/3208. We are definitely interested in resolving this and are working closely with the Stencil team.

[liamdebeasi]

Thanks! The issue here appears to be related to the default behavior of Next.js, not Ionic: https://stackoverflow.com/questions/65936222/next-js-syntaxerror-unexpected-token-export

By default Next.js transpiles ES6 code in the src folder and ignores anything in the node_modules directory. This issue is similar to the testing updates required for Jest and Ionic 6: https://ionicframework.com/docs/intro/upgrading-to-ionic-6#testing.

The recommended approach on https://github.com/vercel/next.js/discussions/32223 seems to be to use https://www.npmjs.com/package/next-transpile-modules.

Your next.config.js file should look like this:

const withTM = require('next-transpile-modules')(['@ionic/react', '@ionic/core', '@stencil/core', 'ionicons']);

/** @type {import('next').NextConfig} */
module.exports = withTM({
  reactStrictMode: true,
});

However, in doing that you will likely get a window is not defined error in ion-col.js. That is a separate issue we are tracking in https://github.com/ionic-team/ionic-framework/issues/24446. We are actively investigating and hope to have a fix for that soon.

---

Can you try the next-transpile-module fix and let me know if it resolves the Unexpected token 'export' error?