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.

[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 vercel/next.js#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 #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?

[liamdebeasi]

I had some free time and fixed the window error in: #24603. There appears to be a lingering issue with Ionicons, and I am looking at that separately.

[liamdebeasi]

I fixed the window and Ionicons issues. I also created a dev build with the fixes if you are interested in testing that alongside the next-transpile-module suggestion:

npm install @ionic/[email protected]

[Polarisation]

@liamdebeasi I've also been trying to get Ionic and Next.js working again since this broke in the early v6 betas.

With your latest fixes + transpiling, it's almost working!

It now compiles, but there's a runtime error now when trying to use an ion-icon:

Unhandled Runtime Error
TypeError: URL constructor:  is not a valid URL.
Call Stack
getAssetPath
node_modules/@stencil/core/internal/client/index.js (2684:21)
getNamedUrl
node_modules/@ionic/core/components/icon.js (46:23)
getUrl
node_modules/@ionic/core/components/icon.js (27:11)
loadIcon
node_modules/@ionic/core/components/icon.js (255:25)

If I remove the use of <ion-icon> everything else is working.

My reproduction repo here: https://github.com/Polarisation/ionic-next-js
Adapted from a TypeScript / Ionic / Next.js example which worked correctly using Ionic v5.

[christianidas]

I have applied your fixes in next.config.js, and am using your dev version of @ionic/react. I am now getting an errors with ion-icon as well. I've pushed the changes I made to the same repo so you can try as well. It looks like I'm getting a completely different error in that one.

[christianidas]

One thing to note, my actual project (not the demo project I shared) is working with these same changes, as long as I remove the call to setupIonicReact. I see that it is noted as a required call to make in the Ionic docs for v6, but is it something that we should need to make when using Next.js?

[liamdebeasi]

Can you update to Ionicons 6.0.1 in your project? That icon issue should be fixed.

The setupIonicReact issue should be fixed in 360643d.

[Polarisation]

Ionicons 6.0.1 does not fix the runtime error I listed in #24481 (comment)

This error is not blocking me from using Ionic with Next.js, since I'm not using IonIcons myself, however it would be beneficial for Ionic to fix this as my reproduction repo is adapted directly from the Ionic example app provided by Next.js (generated with create-next-app --example with-ionic-typescript). Others will likely use this to assess whether Ionic can be used with Next.js, as I did.

[liamdebeasi]

The issue mentioned in #24481 (comment) is caused by ionic-team/stencil#3208. We are definitely interested in resolving this and are working closely with the Stencil team.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24604 and #24603, and a fix will be available in an upcoming release of Ionic Framework.

We are still working on the issue mentioned in #24481 (comment) and will track that in ionic-team/stencil#3208.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.