About Faust.js dependency versions

[bilalmalkoc]

For 2 weeks I have been trying to learn faust.js but I just realized that react, next, react-dom versions are very old. When I updated to the latest version, I got many errors.

When I look at Next.js and React.js, there are many differences in the new versions. Like app routing, React component types. When I look at the Faust getting started document, there is old next usage. I want to learn the parts I don't understand in Faust by looking at the next.js document, but there is a huge version difference between the two. I wonder why Faust.js has not updated these versions and documentation.

I was really excited when I first heard about Faust.js, especially because it has WP Engine behind it. But I'm a bit disappointed with this old usage, the lack of interest in the documentation and the lack of dependency updates.

[theodesp]

Hey @bilalmalkoc. Thank you for the feedback. We do keep some examples of react, next, react-dom for testing purposes, however that does no mean that you cannot upgrade them to the latest versions.

The new Next.js v13 offers two ways to create pages

• Pages router which is supported by Faust.js
• App router which is supported by the new App router package.

We do have examples of both. The main difference is that most of the existing features as showcased in the Faustjs.org website are meant to be used with Next.js pages router.

In case of the Nextjs App router, you can check out the App router example project here

❯ npx create-next-app \
    -e https://github.com/wpengine/faustjs/tree/main \
    --example-path examples/next/app-router \
    --use-npm \
    my-app
cd my-app

We also have a tutorial for you to get started.

<<<<<<<<<<<<<<<<
https://faustjs.org/tutorial/getting-started-with-the-experimental-app-router
<<<<<<<<<<<<<<<<

We are still working on improving this feature and a few components are experimental.

As for the Gutenberg Support we also have some plans to support this as well. We have an open RFC document detailing this:

#1619

So To recap:

• If you want to use the latest features of Next.js app router with RSC then use the Faust App-router package.
• If you want to use the pages router of Next.js then use the regular Faust.js which can be upgraded to the latest Next.js version.

[bilalmalkoc]

Hello @theodesp. Thank you for your reply.

When i check the app router example dependencies here: https://github.com/wpengine/faustjs/blob/canary/examples/next/app-router/package.json it is requiring @faustwp/experimental-app-router package.

But in the layout.tsx https://github.com/wpengine/faustjs/blob/canary/examples/next/app-router/app/layout.tsx it is importing ssr from import { FaustProvider } from '@faustwp/experimental-app-router/ssr'

This ssr is not exists in the @faustwp/experimental-app-router package. So i am getting an error (can not find module).

[theodesp]

Hey @bilalmalkoc. Thank you for pointing this out. It looks like the package is not build properly and its missing some files. We will try to provide a fix today.

[theodesp]

He @bilalmalkoc. Could you try the main branch instead of the canary branch instead? It looks like the @faustwp/experimental-app-router/ssr package is not available in the latest version:

❯ npx create-next-app \
    -e https://github.com/wpengine/faustjs/tree/main \
    --example-path examples/next/app-router \
    --use-npm \
    my-app
cd my-app

This may throw some errors about incompatible React versions so you can install them

❯ npm i --legacy-peer-deps

added 182 packages, and audited 183 packages in 9s

24 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> cp .env.local.sample .env.local
❯ npm run dev

> dev
> faust dev

warn - Could not find FAUST_SECRET_KEY environment variable.
warn - Some functionality may be limited.
   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000
   - Environments: .env.local

[samxmunoz]

Good morning @bilalmalkoc! 👋🏼

One of the Developer Advocates on the WP Engine Team, @Fran-A-Dev suggested you might want to check out his latest article + video on Faust + Next.js 14.

Article: https://wpengine.com/builders/app-router-and-auth-support-in-faust-js-with-next-js-14/

Video: https://youtu.be/LqkeJoMUtyk?si=J0xblu_o81Ow15Ev

Thanks!
Sam
Community Manager ✨ WPE DevRel