Does not work with fastify-cli typescript template

[JoffrayBillon]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the bug has not already been reported

Fastify version

4.0.0

Plugin version

9.2.0

Node.js version

14.20.1

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

12.6.1

Description

The plugin don't work on the basic fastify-cli template in typescript.
Adding this:

  import FastifyNextJS from '@fastify/nextjs';
  ...
  void fastify.register(FastifyNextJS, {
    dev: process.env.NODE_ENV !== 'production',
    prefix: '/admin',
  });

After that the code emit this message

We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
[App] 
[App] The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
[App] 
[App]   - allowJs was set to true
[App]   - noEmit was set to true
[App]   - incremental was set to true
[App]   - exclude was set to ['node_modules']
[App] 
[App] The following mandatory changes were made to your tsconfig.json:
[App] 
[App]   - esModuleInterop was set to true (requirement for SWC / babel)
[App]   - isolatedModules was set to true (requirement for SWC / Babel)
[App]   - jsx was set to preserve (next.js implements its own optimized jsx transform)

Then change the tsconfig.json. And this make the app loop restart.

From what I've read it looks to be similar to this thread already closed #407.

Steps to Reproduce

Install fastify with ts template:
fastify generate . --lang=ts
Then install the fastify-nextjs plugin the conventional way.

Expected Behavior

The app should be able to work with the FastifyNextJS in typescript version.

[mcollina]

cc @fastify/typescript

[mcollina]

Thanks for reporting! Would you like to send a Pull Request to address this issue? Remember to add unit tests.

[JoffrayBillon]

I have no idea how to fix this bug and after more research it looks like that behavior comes from the nextjs implementation... Should I open a ticket on their side, find a way to block the behavior on fastify nextjs or make the tsconfig setting works globally with thoses settings for fastify ?

[climba03003]

I believe it is a non-issue here. Next.js planned to modify the user setting, but it already provided the information that modified.

It doesn't means that the current template is in-compatible to this plugin but it requires you to justify yourself is the modification fit your needs.

[JoffrayBillon]

I not pretty sure I get what you mean, it's not a modifications that I ask it just don't work the way I showed in the description ^^'

[climba03003]

it just don't work the way I showed in the description

Then, a proper repro with all the code would be great.

[fozziethebeat]

I'm running into the same problem. I created a typescript project with fastify generate . --lang=ts and tried to include @fastify/nextjs. I managed to get things to build but I can't get the nextjs pages to server via fastify.

A more robust demo repo of how to setup this up with the default typescript fastify project would be really helpful.

[fozziethebeat]

Also, one maybe helpful clarification.

I modified by build step to be :

  "build": "tsc && next build",

With this change npm run start works correctly. npm run dev does not, it goes into an infinite loop with loading environment variables.

[fozziethebeat]

I put together a demo repository that demonstrates this problem: https://github.com/fozziethebeat/fastify-nextjs-ts.

I created this by running

npx fastify generate fastify-nextjs-ts  --lang=ts
cd fastify-next-ts
npm install
npm i @fastify/nextjs next react react-dom

And then adding a basic src/pages/hello.tsx and updating src/app.ts with the lines recommended in the primary README.

I can confirm that npm run start works properly and includes the nextjs page. Running npm run dev goes into an infinite loop where the server never starts.

[fozziethebeat]

To try and diagnose this further, I did the same steps but with the standard javascript Fastify template project. I stored that in this repo: https://github.com/fozziethebeat/fastify-nextjs-js

With the javascript template, npm run dev also hangs forever and never starts the server. It doesn't output anything so I can't quite tell what's going on. But I'm guessing fastify -w is what's triggering some underlying issue.

[climba03003]

fastify-cli is watching the CWD.
If something is triggering the changes, it is expected to restart forever.

I assume nextjs is actually always built the temp assets inside node_modules in dev mode.
And when it restart, the dev mode will clear the temp assets and rebuild again.
That's also why pre-built would works.
Maybe adding node_modules inside the ignore list would helps.

[fozziethebeat]

I think that's the part I wasn't too familiar with (Still getting familiar with fastify).

Replacing the typescript dev:start command to be

    "dev:start": "fastify start --ignore-watch='node_modules .next .ts$' -w -l info -P dist/app.js"

did the trick. now npm run dev is working and picking up all the changes. I also had to set noEmit to false in tsconfig.

[climba03003]

I am going to close and pin this issue.
The solution already exists throughout the conversation.