search

firebase / firebase-tools

The Firebase Command Line Tools
MIT License
4.02k stars 937 forks source link

Deploying NextJS using Firebase Deploy throws "Cannot read properties of null (reading 'toString') at ɵcodegenFunctionsDirectory " #5369

Closed sanesanyo closed 1 year ago

sanesanyo commented 1 year ago

[REQUIRED] Environment info

Firebase: 9.15.0 Node.js: 18.0.0 Npm: 8.6.0

firebase-tools: 11.19.0

Platform: Windows

[REQUIRED] Test case

Deploy NextJS using Firebase deploy using the new launched experimental feature for web frameworks

[REQUIRED] Steps to reproduce

  1. Create a project using "npx create-next-app@latest"
  2. Install the latest version of Firebase CLI
  3. cd into the NextJS project and "npm install firebase"
  4. Create a .env.local file to add all the environment variables
  5. Firebase init --> choose hosting & functions
  6. npm run dev to test if everything is working fine locally (everything works)

Package.json

{ "name": "gpt3-cover-letter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@next/font": "13.1.1", "eslint": "8.30.0", "eslint-config-next": "13.1.1", "file-saver": "^2.0.5", "firebase": "^9.15.0", "next": "^13.1.1", "openai": "^3.1.0", "react": "18.2.0", "react-dom": "18.2.0" } }

Firebase.json

{ "functions": [ { "source": "functions", "codebase": "default", "ignore": [ "node_modules", ".git", "firebase-debug.log", "firebase-debug.*.log" ] } ], "hosting": { "source": ".", "ignore": [ "firebase.json", "*/.", "/node_modules/" ] }, "emulators": { "functions": { "port": 5001 }, "hosting": { "port": 5000 }, "ui": { "enabled": true }, "singleProjectMode": true, "auth": { "port": 9099 }, "firestore": { "port": 8080 }, "database": { "port": 9000 }, "pubsub": { "port": 8085 }, "storage": { "port": 9199 }, "eventarc": { "port": 9299 } } }

[REQUIRED] Expected behavior

When I run "firebase deploy", my NextJS is deployed.

[REQUIRED] Actual behavior

I get the following error when running "firebase deploy"

TypeError: Cannot read properties of null (reading 'toString') at ɵcodegenFunctionsDirectory (C:\Users\sanyo\AppData\Roaming\npm\node_modules\firebase-tools\lib\frameworks\next\index.js:220:18) at async prepareFrameworks (C:\Users\sanyo\AppData\Roaming\npm\node_modules\firebase-tools\lib\frameworks\index.js:305:84) at async deploy (C:\Users\sanyo\AppData\Roaming\npm\node_modules\firebase-tools\lib\deploy\index.js:53:13)

MiftahClassifieds commented 1 year ago

do not miss to run firebae experiments:enable webframeworks before init firebase.json: `` { "hosting": { "source": ".", "ignore": [ "firebase.json", "*/.", "/node_modules/" ] } }

``

sanesanyo commented 1 year ago

@MiftahClassifieds Tried everything, still getting the same issue. I think I am going to move out of Firebase hosting and will deploy it myself on Cloud Run. This is getting far too annoying. I was thinking about giving middleware a shot and try to set some rules to redirect from root to locale routes based on the browser locale. But it is only supported on 11.19 and above firebase tools version. What a mess.

sanesanyo commented 1 year ago

@MiftahClassifieds I tried with rewrite rules but that aint working either. Every time getting "Internal Server Error" at the root.

MiftahClassifieds commented 1 year ago

Hi, @sanesanyo How much pages do you have into your project Did you switch from react If you have many pages try to build a new project with few pages say index and then add page by page to hosting .so by that you can easily determine errors and fix them This is what I did .I have switched from reactjs to nextjs to benefit from seo. I have ✌ new projects .one have all my old pages and still gets errors.and small one that I created page by page . Good luck

MiftahClassifieds commented 1 year ago

@sanesanyo Pleased provide your firebase.debug.log from project not from cloud

sanesanyo commented 1 year ago

@MiftahClassifieds I did not switch from React. I started directly with NextJS. I did add page by page and added locales later. Do you think it will make sense to delete the .firebase folder, .out folder and do fresh firebase deploy?

MiftahClassifieds commented 1 year ago

Inspecting your last debug I realized this package is responsible for the error!![translate-next] If you switched to next-i18next there is no reason why this package appear so yhave to CLEAN UP your project because I realized that these bags comes from external libraries. So when I removed for ex this library [mui/materials] the bag gone . Plz send me your package.json dependencies. By now remove these builds [.firebase .next .yarn if u use it . Out .firebaserc firebase.json .gitignore package.lock.json from your root and node_modules/package.lock.json 3 close current folder 4 reopen it 5 npm install 6 npm ci 7 firbase deploy Good 🤞

sanesanyo commented 1 year ago

@MiftahClassifieds No, i went ahead with next-translate as I realized that it cannot be because of this package and has to do with some config. Alright, i will remove all those folders. Why should I delete firebase.json, .firebaserc .got ignore and package-lock.json? Rest makes sense. Thanks a lot for your help.

MiftahClassifieds commented 1 year ago

@sanesanyo I have to see your package.json to help As I understood you still work with next-translate instead of next-i18next Yes all these 📂 are generated every time you build your project and should be cleaned up

sanesanyo commented 1 year ago

@MiftahClassifieds Here is my package.json: { "name": "gpt3-cover-letter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@chakra-ui/icons": "^2.0.14", "@chakra-ui/react": "^2.4.4", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "@mdx-js/loader": "^2.2.1", "@mdx-js/react": "^2.2.1", "@next/font": "^13.1.1", "@next/mdx": "^13.1.1", "@stripe/stripe-js": "^1.46.0", "draft-js": "^0.11.7", "eslint": "8.30.0", "eslint-config-next": "13.1.1", "file-saver": "^2.0.5", "firebase": "^9.15.0", "framer-motion": "^6.5.1", "js-cookie": "^3.0.1", "next": "^13.1.1", "next-mdx-remote": "^4.2.1", "next-seo": "^5.15.0", "next-translate": "^1.6.0", "openai": "^3.1.0", "react": "18.2.0", "react-cookie-consent": "^8.0.1", "react-dom": "18.2.0", "react-draft-wysiwyg": "^1.15.0", "react-hook-form": "^7.41.1", "react-icons": "^4.7.1", "react-query": "^3.39.2", "react-select": "^5.7.0" }, "devDependencies": { "esbuild": "^0.16.10" } }

Isn't firebase.json & .firebaserc generated on firebase init? So I should also reinitialise my firebase??

sanesanyo commented 1 year ago

@MiftahClassifieds I have tried everything. Everything you mentioned. Still the same stupid bug. Root route is not getting served and /en, /de route is getting served.

leo-paz commented 1 year ago

@sanesanyo whats the general gist of getting next 13 to work using cloud run? I wonder if you can do the same thing with standard firebase and rewrite rules to a function?

sanesanyo commented 1 year ago

@leo-paz I guess you can do that too. But Cloud Run is just containerzed version of the webapp so I am not going to face the problems I am facing now i.e. local host behaviour is different from the deployed app. Interestingly even with the current: firebase deploy, something is getting deployed on Cloud Run. I do not know the whole dynamics as there is not a lot of documentation about it. But it looks like a Cloud Function is calling the cloud run URL.

MiftahClassifieds commented 1 year ago

@sanesanyo Hi sorry but as your dependencies are not as mine. I cannot provide help .you working with next13 me 12 as you have many dependencies. My strategy was to remove external libraries. And add one by one to fix errors. But I realized that is not good way because this mestirius ssr app not want to be deplored. I was thinking yesterday to switch to amplify to avoid wasting of time But before that I have to understand if there is some way to deploy pages separately and then find out how to deploy this stupid ssr function that stacked us for 2 weeks?!

sanesanyo commented 1 year ago

@MiftahClassifieds All good, I understand. Thanks for your help none the less. I am getting a sense that the problem I am facing is a middleware problem & only 11.20 firebase-tool version supports it. So I am going to give that a try with Next12 and see if that helps. I do not understand why AWS Amplify supports NextJS 13 and Firebase does not?

sanesanyo commented 1 year ago

@jamesdaniels Can you please look at this thread and help us out?

louis44300 commented 1 year ago

Hi,

I also had this same problem = the title of this Issue: Deploying NextJS using Firebase Deploy throws "Cannot read properties of null (reading 'toString') at ocodegenFunctionsDirectory"

Here is my little experience.

My computer: Windows 10 PC.

(Also FYI I have npm v8.5.0).

I did not verify my NextJS & React & React-dom versions, but I suppose I am compatible with what I read above:

Note about nvm: In order to go from Node 18 to Node 16, I installed nvm and added Node 16. This does not work. So I read the doc... Solution, as mentionned in nvm doc: I uninstalled Node 18, installed nvm, then used nvm to install Node 16. This worked for me. And now I can use nvm to reinstall Node 18 and switch versions as often as I want.

PS: thanks for all your hints and your sharing of experiences!

InfiniteLearner commented 1 year ago

Still having this isue with firebase-tools v11.21.0. This really need a fix

Downgrading to Node version 16.14.2 and firebase-tools version 11.18.0 did not solve the problem.

jinpark1 commented 1 year ago

Tried so many things and as mentioned above, and this worked for me.

$ npm i -g firebase-tools@11.18.0

jinpark1 commented 1 year ago

I have same error. In my case 11.18.0 work for me.

$ npm i -g firebase-tools@11.18.0

thanks! this actually worked!

InfiniteLearner commented 1 year ago

Hi,

Downgrading to Node v 16.14.2 and firebase-tools version 11.18.0 did solve my problem. It seems I had others issues with my config unrelated to next.js + firebase. (PS : I use Next 13)

leo-paz commented 1 year ago

@InfiniteLearner what config errors? I'm still getting this error even with those versions unfortunately

InfiniteLearner commented 1 year ago

@leo-paz I couldn't tell. I started a new project from scratch and once I had a minimal version working (with a downgrade on Node and fireabase-tools), I copy paste file by file until my project was complete. I suggest you do the same, it will be way faster than trying to find the exact problem in your config.

leo-paz commented 1 year ago

I posted a solution here: https://github.com/firebase/firebase-tools/issues/5421

the firebase-cli was expecting the project to be built to .next instead of reading whatever you had your distDir set to in your next.config.mjs:

const nextConfig = {
  distDir: '.next',
}
sanesanyo commented 1 year ago

@leo-paz Do you think this will also resolve the issue I was having with localisation using next-translate? That is only localised routes were getting served & not the root routes.

leo-paz commented 1 year ago

@sanesanyo probably not because you actually got yours to deploy right? if the built routing files are in the directory firebase is deploying then it probably won't fix anything. I'm now running into an issue where none of my pictures are being shown when i deploy to firebase. Similar to what is described here: https://github.com/vercel/next.js/issues/18412

have you experienced this?

JustDankas commented 1 year ago

Im having the same issue pretty much, im just trying to deploy a very simple 2 page application , one index page and one very simple hello world page and nextjs is trying to make a cloud function for that hello world page. When i try to deploy i get : Error: An unexpected error has occurred. And in the debug file i get this

[debug] [2023-02-10T20:06:25.068Z] TypeError: Cannot read properties of null (reading 'toString')
    at ɵcodegenFunctionsDirectory (C:\Users\JustDankas\AppData\Roaming\npm\node_modules\firebase-tools\lib\frameworks\next\index.js:222:18)
    at async prepareFrameworks (C:\Users\JustDankas\AppData\Roaming\npm\node_modules\firebase-tools\lib\frameworks\index.js:306:84)
    at async deploy (C:\Users\JustDankas\AppData\Roaming\npm\node_modules\firebase-tools\lib\deploy\index.js:53:13)
[error] 
[error] Error: An unexpected error has occurred.

nexterror

chrismclarke commented 1 year ago

I think the issue is if you are running on windows spawnSync commands may need to use npm.cmd instead of npm (depending on how npm is installed). Thread on StackOverflow: https://stackoverflow.com/questions/37125619/spawnsyncnpm-install-gives-error-spawnsync-npm-enoent,

Once manually changing the line in the ecodegenFunctionsDirectory code I was able to get passed this stage. Making this change I was able to deploy a fairly complex app with both node versions 16 and 18 and latest firebase-tools 11.22.0.

This is only a hacky fix at best and won't persist any updates, so as a better workaround I've swapped to using WSL instead.

EDIT - looks to be fixed now

edarioq commented 1 year ago

In my case the culprit was using import { NextResponse } from 'next/server' NextResponse.json({ something }); for API routes within the app directory.

Also running npm i -g firebase-tools@latest.

davebrewer commented 1 year ago

In my case the culprit was using import { NextResponse } from 'next/server' NextResponse.json({ something }); for API routes within the app directory.

Also running npm i -g firebase-tools@latest.

edarioq, I think I have the same issue but not sure how to get around it, can you elaborate your fix? If I move the /api into the /src dir instead of /src/app it doesn't find the api. How did you solve this?

davebrewer commented 1 year ago

Was issue with latest NextJs so downgraded to "next": "13.4.2", and deployed api to firebase fine.