[bug] `tauri dev` Incompatible with Next.js 13

[jjorissen52]

Describe the bug

Using Next.js 13 will cause a white screen and console error with tauri dev: SyntaxError: Unexpected token '.'

Reproduction

Using any package manager, initialize a next.js app:

• pnpm create tauri-app
• select pnpm, next-ts
• cd tauri-app
• pnpm install
• pnpm tauri dev

Expected behavior

The dev window to render the default application screen

Platform and versions

Environment › OS: Mac OS 10.14.6 X64 › Node.js: 18.13.0 › npm: 9.4.0 › pnpm: 7.26.2 › yarn: Not installed! › rustup: 1.25.1 › rustc: 1.67.0 › cargo: 1.67.0 › Rust toolchain: stable-x86_64-apple-darwin

Packages › @tauri-apps/cli [NPM]: 1.2.3 › @tauri-apps/api [NPM]: 1.2.0 › tauri [RUST]: 1.2.4, › tauri-build [RUST]: 1.2.1, › tao [RUST]: 0.15.8, › wry [RUST]: 0.23.4,

App › build-type: bundle › CSP: unset › distDir: ../dist › devPath: http://localhost:1420/ › framework: React (Next.js) › bundler: Webpack

App directory structure ├─ node_modules ├─ .next ├─ src-tauri ├─ .vscode └─ src

Stack trace

N/A

Additional context

After a clean install, you can get dev mode working by taking the following steps:

• rm -rf node_modules/ pnpm-lock.yaml
• change next dependency in package.json to "next": "^12"
• pnpm install
• pnpm tauri dev

[FabianLars]

So my guess is that they raised they minimum supported Safari version in next@13, at least in dev?

The webview in macos 10.14.6 should be equivalent to Safari 13.0 (but since we couldn't confirm that on an actual device it might still be 12)

[jjorissen52]

@FabianLars Anything you'd like me to do to gather more info?

[jjorissen52]

Next 13 dev server works fine in my browser.

[FabianLars]

Next 13 dev server works fine in my browser.

That doesn't tell us much since your browser is likely not Safari v12.

Anything you'd like me to do to gather more info?

Maybe the output of navigator.userAgent from inside the tauri window. Also try building your frontend, maybe nextjs uses different targets for dev and build.

[jjorissen52]

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko)

I can confirm that it works as expected with tauri build.

[FabianLars]

@JonasKruckenberg Do you think our webview version table is inaccurate, or the user agent? because 605 is macos 10.13 (safari 11) in our table, not 10.13 🤔

[lencx]

A js file was being tampered with in development mode as html, but it was working fine in release mode.

I found the cause of the problem, it is a cache problem, clear the tauri browser cache can be. So my problem and upstairs may not be the same.

macOS: ~/Library/Caches/com.lencx.chatgpt

Dev:

Release:

[LucasZNK]

Describe the bug

Using Next.js 13 will cause a white screen and console error with tauri dev: SyntaxError: Unexpected token '.'

Reproduction

Using any package manager, initialize a next.js app:

* pnpm create tauri-app

* select pnpm, next-ts

* cd tauri-app

* pnpm install

* pnpm tauri dev

Expected behavior

The dev window to render the default application screen

Platform and versions

Environment › OS: Mac OS 10.14.6 X64 › Node.js: 18.13.0 › npm: 9.4.0 › pnpm: 7.26.2 › yarn: Not installed! › rustup: 1.25.1 › rustc: 1.67.0 › cargo: 1.67.0 › Rust toolchain: stable-x86_64-apple-darwin

Packages › @tauri-apps/cli [NPM]: 1.2.3 › @tauri-apps/api [NPM]: 1.2.0 › tauri [RUST]: 1.2.4, › tauri-build [RUST]: 1.2.1, › tao [RUST]: 0.15.8, › wry [RUST]: 0.23.4,

App › build-type: bundle › CSP: unset › distDir: ../dist › devPath: http://localhost:1420/ › framework: React (Next.js) › bundler: Webpack

App directory structure ├─ node_modules ├─ .next ├─ src-tauri ├─ .vscode └─ src

Stack trace

N/A

Additional context

After a clean install, you can get dev mode working by taking the following steps:

* rm -rf node_modules/ pnpm-lock.yaml

* change next dependency in package.json to "next": "^12"

* pnpm install

* pnpm tauri dev

Until nextjs adds support for SSG (next export) to the app dir feature it won't really work in tauri at all because there is no nodejs runtime in a tauri app , we need next export.

[airstrike]

Looks like support for next export with appDir was just added to Next.js 🎉

https://github.com/vercel/next.js/issues/45507#issuecomment-1473701983

[agmmnn]

appdir is used in this repo, you can check: https://github.com/agmmnn/tauri-ui-boilerplate

[amrbashir]

Closing this since it is not really an issue with tauri.

[dkobylarz]

@jjorissen52 I have come across the problem on macOS 10.14.6. The fix that works for me is to add tauri api package to transpiled packages list:

const nextConfig = { ... transpilePackages: ['@tauri-apps/api'], ... }