Next.js SSR Deployment fails due to wrong firebase-tools creating wrong folder

[tobenna-wes-re]

[REQUIRED] Environment info

13.7.5

firebase-tools:

macOS

Platform:

[REQUIRED] Test case

Deployment of Next using Firebase Webframeworks due to firebase creating wrong ssr folder

[REQUIRED] Steps to reproduce

run firebase deploy --only hosting when using next.js

[REQUIRED] Expected behavior

.next should be in the a sub directory of the functions

[REQUIRED] Actual behavior

I get functions.next instead. This then leads to firebase uploading the files without the ssr files

This then leads to a server error
Error: ENOENT: no such file or directory, open '/workspace/.next/BUILD_ID'

[tobenna-wes-re]

This seems to have been introduced in 13.7.0 because 13.6.1 works.

[aalej]

Hey @tobenna-wes-re, thanks for reaching out, sorry to hear you encountered this issue. I’m currently trying to reproduce this, but so far I’m unable to replicate the behavior you mentioned. The steps I took to reproduce the issue were:

1. Run npx create-next-app@latest my-app
   • Would you like to use TypeScript? No
   • Would you like to use ESLint? No
   • Would you like to use Tailwind CSS? No
   • Would you like to use src/ directory? Yes
   • Would you like to use App Router? Yes
   • Would you like to customize the default import alias (@/*)? No
2. Run cd my-app/
3. Run firebase experiments:enable webframeworks
4. Run firebase init hosting --project PROJECT_ID
5. Run firebase deploy --only hosting
   • Successful deployment

I tried the above steps using firebase-tools v13.7.0 and v13.7.5, and no errors were raised during deployment. In case I’m missing anything here, please let me know. Also, could you provide additional details on the steps you took to set up your Next.js project?

[manabu0926]

@aalej
#7054

same issue.
environment
region: asia-east1
and, this project is multi site.

deploy command

firebase deploy --only hosting:staging

firebase.json

{
  "hosting": [
    {
      "target": "staging",
      "source": ".",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "frameworksBackend": {
        "region": "asia-east1",
        "maxInstances": 2
      }
    },
    {
      "target": "production",
      "source": ".",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "frameworksBackend": {
        "region": "asia-east1",
        "maxInstances": 3
      }
    }
  ]
}

maybe, similar problem.
#7054

Sorry for my poor English.

[aalej]

Hey @manabu0926, #7054 seems to be a different issue. From what I can tell, the initial report here is that the Firebase CLI generates a wrong folder structure. Instead of creating functions/.next, it creates functions.next, which would cause an error. Let me know in case I misunderstood anything.

If you’re encountering an ENOENT error, could you provide some details on how you set up your Next.js project? I tried following the multi-site setup you have in your firebase.json, but I’m still unable to reproduce the error.

If you’re encountering an issue similar to #7054, could you try the workarounds provided #7054 (comment) and #7054 (comment) to see if you’d be able to deploy successfully?

[manabu0926]

If you’re encountering an issue similar to #7054, could you try the workarounds provided #7054 (comment) and #7054 (comment) to see if you’d be able to deploy successfully?

The above workaround solved my problem.
(can deploy.)

[tobenna-wes-re]

@aalej

I am using typescript.
I'm on a MacOS with M1
node version: v18.20.2
npm version: 10.5.2

This is my tsconfig.json

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "ES2022",
    "allowSyntheticDefaultImports": true
  },
  "compileOnSave": true,
  "include": ["./src", "**/*.ts"],
  "exclude": ["**/*.test.ts"]
}

and my firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": [
    {
      "source": "functions/",
      "codebase": "default",
      "ignore": [
        "node_modules",
        "**/node_modules/**",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint",
        "npm --prefix \"$RESOURCE_DIR\" run build"
      ]
    }
  ],
  "hosting": {
    "source": "web/",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "frameworksBackend": {
      "region": "us-central1"
    }
  }
}

[tobenna-wes-re]

Hey @manabu0926, #7054 seems to be a different issue. From what I can tell, the initial report here is that the Firebase CLI generates a wrong folder structure. Instead of creating functions/.next, it creates functions.next, which would cause an error. Let me know in case I misunderstood anything.

If you’re encountering an ENOENT error, could you provide some details on how you set up your Next.js project? I tried following the multi-site setup you have in your firebase.json, but I’m still unable to reproduce the error.

If you’re encountering an issue similar to #7054, could you try the workarounds provided #7054 (comment) and #7054 (comment) to see if you’d be able to deploy successfully?

@aalej This is correct. Instead of creating functions/.next, it creates functions.next. It will finish deploying to functions with no error but not all files will be uploaded correctly. So you will have the .next files missing in the function. I was able to figure this out be logging into gclould and noticed that the .next folder was absent. This only causes an error when you try to load some of the images or utilize ssr. with an internal error (due to '/workspace/.next/BUILD_ID' not found)

[jamesdaniels]

@leoortizz PTAL

[leoortizz]

Hey @tobenna-wes-re, apologies for this. I just created #7099 that should fix it. In the meantime, you can change your hosting source from

  "hosting": {
    "source": "web/"
  }

to

  "hosting": {
    "source": "web"
  }

which should fix the wrong generated path issue.

As soon as #7099 is merged and available in the next release of firebase-tools, both versions should work.