Tutorial Issue - ReferenceError: withFaust is not defined

[timthefoolman]

I've attempted to install and run the tutorial 3-4 times, and continue to see the following error when I try to execute 'npm run dev':

`> faust-tutorial@0.1.0 dev

next dev --turbopack

/Users/xxxxxxxx/WebApps/faust-tutorial/next.config.js:6
module.exports = withFaust({
^

ReferenceError: withFaust is not defined
at Object. (/Users/xxxxxxxx/WebApps/faust-tutorial/next.config.js:6:1)
at Module._compile (node:internal/modules/cjs/loader:1554:14)
at Object..js (node:internal/modules/cjs/loader:1706:10)
at Module.load (node:internal/modules/cjs/loader:1289:32)
at Function._load (node:internal/modules/cjs/loader:1108:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
at cjsLoader (node:internal/modules/esm/translators:262:5)
at ModuleWrap. (node:internal/modules/esm/translators:196:7)
at ModuleJob.run (node:internal/modules/esm/module_job:271:25)

Node.js v22.14.0
`

[Sergey-388]

I have the same problem.

[colinmurphy]

Thanks @timthefoolman for raising this issue and also @Sergey-388 .

We will have a look into this issue and get back to you.

[moonmeister]

Hey all, is this line in you next.config.js?https://github.com/wpengine/faustjs/blob/9fa95cffb75e674a1473cb1f4b613355511151fb/examples/next/tutorial/next.config.js#L1C1-L2C1

[timthefoolman]

This seemed to be the core issue. Thank you!

[colinmurphy]

Just confirming I can replicate the issue

I have added this as an issue to the docs repo so we can track and get a fix rolled out for this - wpengine/faustjs.org#316

[timthefoolman]

Thanks. Things are up and running now with that change.

I'll probably be back with some other noob questions, but at least I can go through the tutorial now.

[colinmurphy]

@timthefoolman

No worries at all :) Glad to hear that fixed the issue and welcome to the community too.

We also now have a PR to fix the issue. It seems to be a quirk with having Faust defined before secure headers so we should have this merged in shortly - #2087

Just to note aswell we have a Discord channel here which a lot of users asks questions but also feel free to submit new issues/discussions here too - https://discord.com/invite/headless-wordpress-836253505944813629

We are also working. on a new headless WordPress toolkit for WordPress here which we are adding docs, examples and packages - https://github.com/wpengine/hwptoolkit

The initial implementation should be completed in the next few weeks but we do already have some docs and examples merged.

[Sergey-388]

Yes, it works, thanks!
Here's another problem: examples from the folders faustjs-canary\examples\next\faustwp-getting-started, block-support and custom-toolbar do not run with this output in the console:

PS E:\custom-toolbar> npm run dev

dev
faust dev

info - Faust.js v3.1.0
info - Faust.js CLI v3.1.1
PS E:\custom-toolbar>

That is, the server does not start.

And another question - where can I see more examples of working with faust.js? There is little information, it is very difficult to start.

Here’s the same story with this project: https://github.com/wpengine/atlas-blueprint-portfolio/tree/main – no errors, but the server won’t start. 🚫

I'm a beginner in this, but I’ve been a WordPress developer since 2011. However, I really want to get Headless WP working with Faust.js! I’ve been trying to make it work for almost a year now.

Can you please guide me on what I’m doing wrong? 🙏🙏🙏

Here's what's in the console:

PS E:\atlas-blueprint-portfolio-main> npm run dev

@faustjs/atlas-blueprint-portfolio@0.2.0 dev
faust dev

PS E:\atlas-blueprint-portfolio-main>

The server also does not start, I really want it.

[colinmurphy]

@Sergey-388

Hmm that is odd.

If you delete the node_modules and the .next directory in your app and then run npm ci and then run npm run wp-dev does that install and run the blueprint on http://localhost:8881/wp-admin/plugins.php?

Also then if you open a new tab in the terminal and run npm run generate and then npm run dev does this run your frontend application?

e.g.

colin.murphy@colin-murphy my-app % npm run generate

> faust-tutorial@0.1.0 generate
> faust generatePossibleTypes

warn - Your WordPress site is not running on https!
warn - This is a security concern as all traffic with your secret key is in plain text.
warn - Please make sure your production Faust app runs with a WordPress instance on https!
info - This project's possibleTypes schema has been updated!
colin.murphy@colin-murphy my-app % npm run dev     

> faust-tutorial@0.1.0 dev
> next dev --turbopack

   ▲ Next.js 15.2.3 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.0.27:3000
   - Environments: .env.local

[colinmurphy]

@timthefoolman This is now fixed by #2087

Please feel re-open or create a new issue if there is any further issues.

[colinmurphy]

Re-opening as after the branch is merged I am still having the same issue with Faust import missing cc @moonmeister @Fran-A-Dev @kellenmace

[colinmurphy]

This is now resolved. The issue was a cache issue on GitHub's end when you use create-next-app it uses https://codeload.github.com/wpengine/faustjs/tar.gz/canary which is not up to date with the current tutorial.

We updated the tutorial to use npx degit instead as this clones from the source - #2089

For reference - https://www.npmjs.com/package/degit

[moonmeister]

This is a separate issue, please start a new discussion!