Firebase on nextjs getserversideprop not working on netlify

Support
1

{“errorType”:“Runtime.ImportModuleError”,“errorMessage”:“Error: Cannot find module ‘@grpc/grpc-js/package.json’\nRequire stack:\n- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs”,“trace”:[“Runtime.ImportModuleError: Error: Cannot find module ‘@grpc/grpc-js/package.json’”,“Require stack:”,"- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs"," at _loadUserApp (/var/runtime/UserFunction.js:100:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)"," at Object. (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:999:30)"," at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)"," at Module.load (internal/modules/cjs/loader.js:863:32)"," at Function.Module._load (internal/modules/cjs/loader.js:708:14)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)"," at internal/main/run_main_module.js:17:47"]}

All my product page loads correctly when i click on any of the products i get this error from netlify everything works well on localhost

2

Hi there, @Kwameowusu :wave:

Glad you found us! Before we can help you, we need a little more information on the issues you are facing.

Please share:

  • the name of your build instance: “example-jones.netlify.com”
  • what you have already tried
  • your project repo
  • your full deploy log

Thanks!

3

name of build:

https://oskcat.netlify.app/

Repo:
Kwameowusu/oskcat (github.com)

5:05:47 AM: Build ready to start
5:05:49 AM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
5:05:49 AM: build-image tag: v4.5.0
5:05:49 AM: buildbot version: fa6cc7f6d011b8899be97010416c5b5974d37673
5:05:49 AM: Building without cache
5:05:49 AM: Starting to prepare the repo for build
5:05:49 AM: No cached dependencies found. Cloning fresh repo
5:05:49 AM: git clone https://github.com/Kwameowusu/oskcat
5:05:52 AM: Preparing Git Reference refs/heads/master
5:05:52 AM: Parsing package.json dependencies
5:05:53 AM: Starting build script
5:05:53 AM: Installing dependencies
5:05:53 AM: Python version set to 2.7
5:05:54 AM: v16.13.0 is already installed.
5:05:54 AM: Now using node v16.13.0 (npm v8.1.0)
5:05:54 AM: Started restoring cached build plugins
5:05:54 AM: Finished restoring cached build plugins
5:05:55 AM: Attempting ruby version 2.7.2, read from environment
5:05:56 AM: Using ruby version 2.7.2
5:05:56 AM: Using PHP version 8.0
5:05:56 AM: Started restoring cached node modules
5:05:56 AM: Finished restoring cached node modules
5:05:57 AM: Installing NPM modules using NPM version 8.1.0
5:05:58 AM: npm WARN old lockfile
5:05:58 AM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
5:05:58 AM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
5:05:58 AM: npm WARN old lockfile
5:05:58 AM: npm WARN old lockfile This is a one-time fix-up, please be patient...
5:05:58 AM: npm WARN old lockfile
5:06:30 AM: added 831 packages, and audited 832 packages in 33s
5:06:30 AM: 97 packages are looking for funding
5:06:30 AM:   run `npm fund` for details
5:06:30 AM: 5 moderate severity vulnerabilities
5:06:30 AM: To address all issues (including breaking changes), run:
5:06:30 AM:   npm audit fix --force
5:06:30 AM: Run `npm audit` for details.
5:06:30 AM: NPM modules installed
5:06:30 AM: Started restoring cached go cache
5:06:30 AM: Finished restoring cached go cache
5:06:30 AM: go version go1.16.5 linux/amd64
5:06:30 AM: go version go1.16.5 linux/amd64
5:06:30 AM: Installing missing commands
5:06:30 AM: Verify run directory
5:06:32 AM: ​
5:06:32 AM: ────────────────────────────────────────────────────────────────
5:06:32 AM:   Netlify Build                                                 
5:06:32 AM: ────────────────────────────────────────────────────────────────
5:06:32 AM: ​
5:06:32 AM: ❯ Version
5:06:32 AM:   @netlify/build 18.25.2
5:06:32 AM: ​
5:06:32 AM: ❯ Flags
5:06:32 AM:   baseRelDir: true
5:06:32 AM:   buildId: 619d1f6b7fd04b3ba2e7df95
5:06:32 AM:   deployId: 619d1f6b7fd04b3ba2e7df97
5:06:32 AM: ​
5:06:32 AM: ❯ Current directory
5:06:32 AM:   /opt/build/repo
5:06:32 AM: ​
5:06:32 AM: ❯ Config file
5:06:32 AM:   No config file was defined: using default values.
5:06:32 AM: ​
5:06:32 AM: ❯ Context
5:06:32 AM:   production
5:06:32 AM: ​
5:06:32 AM: ❯ Installing plugins
5:06:32 AM:    - @netlify/plugin-nextjs@3.9.2
5:06:42 AM: ​
5:06:42 AM: ❯ Loading plugins
5:06:42 AM:    - @netlify/plugin-nextjs@3.9.2 from Netlify app
5:06:43 AM: ​
5:06:43 AM: ────────────────────────────────────────────────────────────────
5:06:43 AM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
5:06:43 AM: ────────────────────────────────────────────────────────────────
5:06:43 AM: ​
5:06:43 AM: Using Next.js 12.0.4
5:06:43 AM: Warning: support for Next.js >=11.1.0 is experimental
5:06:46 AM: The "target" config property must be one of "serverless", "experimental-serverless-trace". Building with "serverless" target.
5:06:46 AM: No Next.js cache to restore.
5:06:46 AM: ​
5:06:46 AM: (@netlify/plugin-nextjs onPreBuild completed in 2.7s)
5:06:46 AM: ​
5:06:46 AM: ────────────────────────────────────────────────────────────────
5:06:46 AM:   2. Build command from Netlify app                             
5:06:46 AM: ────────────────────────────────────────────────────────────────
5:06:46 AM: ​
5:06:46 AM: $ npm run build
5:06:46 AM: > oskkiosk@0.1.0 build
5:06:46 AM: > next build
5:06:50 AM: info  - Checking validity of types...
5:06:50 AM: error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /opt/build/repo/.eslintrc.json
5:06:50 AM: info  - Creating an optimized production build...
5:06:50 AM: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
5:06:51 AM: > [PWA] Compile client (static)
5:06:51 AM: > [PWA] Auto register service worker with: /opt/build/repo/node_modules/next-pwa/register.js
5:06:51 AM: > [PWA] Service worker: /opt/build/repo/public/sw.js
5:06:51 AM: > [PWA]   url: /sw.js
5:06:51 AM: > [PWA]   scope: /
5:06:51 AM: > [PWA] Compile server
5:06:52 AM: info  - Using external babel configuration from /opt/build/repo/.babelrc
5:07:43 AM: info  - Compiled successfully
5:07:43 AM: info  - Collecting page data...
5:07:48 AM: info  - Generating static pages (0/3)
5:07:48 AM: info  - Generating static pages (3/3)
5:07:48 AM: info  - Finalizing page optimization...
5:07:48 AM: Page                                       Size     First Load JS
5:07:48 AM: ┌ ○ / (302 ms)                             59.2 kB         135 kB
5:07:48 AM: ├   /_app                                  0 B            72.5 kB
5:07:48 AM: ├ λ /[...aproduct]                         1.56 kB        77.4 kB
5:07:48 AM: ├ ○ /404                                   3.06 kB        75.6 kB
5:07:48 AM: └ λ /api/hello                             0 B            72.5 kB
5:07:48 AM: + First Load JS shared by all              72.5 kB
5:07:48 AM:   ├ chunks/framework-91d7f78b5b4003c8.js   42 kB
5:07:48 AM:   ├ chunks/main-41d778d231971b18.js        28.4 kB
5:07:48 AM:   ├ chunks/pages/_app-80607376d1383c35.js  576 B
5:07:48 AM:   ├ chunks/webpack-e5ce314e7c804e46.js     1.51 kB
5:07:48 AM:   └ css/657d31e0972ac21c.css               2.44 kB
5:07:48 AM: λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
5:07:48 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
5:07:48 AM: ​
5:07:48 AM: (build.command completed in 1m 2.6s)
5:07:48 AM: ​
5:07:48 AM: ────────────────────────────────────────────────────────────────
5:07:48 AM:   3. @netlify/plugin-nextjs (onBuild event)                     
5:07:48 AM: ────────────────────────────────────────────────────────────────
5:07:48 AM: ​
5:07:48 AM: Detected Next.js site. Copying files...
5:07:48 AM: ** Running Next on Netlify package **
5:07:48 AM: 🚀 Next on Netlify 🚀
5:07:48 AM: 🌍️ Copying public folder to /opt/build/repo/out
5:07:48 AM: 💼 Copying static NextJS assets to /opt/build/repo/out
5:07:48 AM: 💫 Setting up API endpoints as Netlify Functions in /opt/build/repo/.netlify/functions-internal
5:07:48 AM: 💫 Setting up pages with getInitialProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
5:07:48 AM: 💫 Setting up pages with getServerSideProps as Netlify Functions in /opt/build/repo/.netlify/functions-internal
5:07:48 AM: 🔥 Copying pre-rendered pages with getStaticProps and JSON data to /opt/build/repo/out
5:07:48 AM: 💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in /opt/build/repo/.netlify/functions-internal
5:07:48 AM: 💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in /opt/build/repo/.netlify/functions-internal
5:07:48 AM: 🔥 Copying pre-rendered pages without props to /opt/build/repo/out
5:07:48 AM: Building 4 pages
5:07:49 AM: 🔀 Setting up redirects
5:07:49 AM: 🔀 Setting up headers
5:07:49 AM: ✅ Success! All done!
5:07:49 AM: ​
5:07:49 AM: (@netlify/plugin-nextjs onBuild completed in 127ms)
5:07:49 AM: ​
5:07:49 AM: ────────────────────────────────────────────────────────────────
5:07:49 AM:   4. Functions bundling                                         
5:07:49 AM: ────────────────────────────────────────────────────────────────
5:07:49 AM: ​
5:07:49 AM: Packaging Functions from .netlify/functions-internal directory:
5:07:49 AM:  - next_api_hello/next_api_hello.js
5:07:49 AM:  - next_aproduct/next_aproduct.js
5:07:49 AM:  - next_image/next_image.js
5:07:49 AM: ​
5:07:51 AM: ​
5:07:51 AM: ────────────────────────────────────────────────────────────────
5:07:51 AM:   Dependencies installation error                               
5:07:51 AM: ────────────────────────────────────────────────────────────────
5:07:51 AM: ​
5:07:51 AM:   Error message
5:07:51 AM:   A Netlify Function failed to require one of its dependencies.
5:07:51 AM:   Please make sure it is present in the site's top-level "package.json".​
5:07:51 AM:   In file "/opt/build/repo/.netlify/functions-internal/next_aproduct/next_aproduct.js"
5:07:51 AM:   Cannot find module '../webpack-runtime.js' from '/opt/build/repo/.netlify/functions-internal/next_aproduct/nextPage/pages'
5:07:51 AM: ​
5:07:51 AM:   Resolved config
5:07:51 AM:   build:
5:07:51 AM:     command: npm run build
5:07:51 AM:     commandOrigin: ui
5:07:51 AM:     publish: /opt/build/repo/out
5:07:51 AM:     publishOrigin: ui
5:07:51 AM:   functions:
5:07:51 AM:     '*':
5:07:51 AM:       included_files:
5:07:51 AM:         - '!node_modules/@next/swc-*/**/*'
5:07:51 AM:         - '!node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*'
5:07:51 AM:   headers:
5:07:54 AM:     - for: /_next/static/chunks/*      values:        cache-control: public, max-age=31536000, immutable  plugins:    - inputs: {}      origin: ui      package: '@netlify/plugin-nextjs'  redirects:    - from: /api/hello      status: 200      to: /.netlify/functions/next_api_hello    - from: /_next/data/aP8Bd4sGckPA4qbENjk9H/:aproduct/*      status: 200      to: /.netlify/functions/next_aproduct    - force: true      from: /_next/image*      query:        q: ':quality'        url: ':url'        w: ':width'      status: 301      to: /nextimg/:url/:width/:quality    - from: /nextimg/*      status: 200      to: /.netlify/functions/next_image    - from: /_next/*      status: 200      to: /_next/:splat    - from: /:aproduct/*      status: 200      to: /.netlify/functions/next_aproductCaching artifacts
5:07:54 AM: Started saving node modules
5:07:54 AM: Finished saving node modules
5:07:54 AM: Started saving build plugins
5:07:54 AM: Finished saving build plugins
5:07:54 AM: Started saving pip cache
5:07:54 AM: Finished saving pip cache
5:07:54 AM: Started saving emacs cask dependencies
5:07:54 AM: Finished saving emacs cask dependencies
5:07:54 AM: Started saving maven dependencies
5:07:54 AM: Finished saving maven dependencies
5:07:54 AM: Started saving boot dependencies
5:07:54 AM: Finished saving boot dependencies
5:07:54 AM: Started saving rust rustup cache
5:07:54 AM: Finished saving rust rustup cache
5:07:54 AM: Started saving go dependencies
5:07:54 AM: Finished saving go dependencies
5:07:56 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:07:56 AM: Creating deploy upload records
5:07:56 AM: Failing build: Failed to build site
5:07:56 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
5:07:56 AM: Finished processing build request in 2m7.114805646s

On page route this also the error code

{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module '@grpc/grpc-js/package.json'\nRequire stack:\n- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs","trace":["Runtime.ImportModuleError: Error: Cannot find module '@grpc/grpc-js/package.json'","Require stack:","- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs","    at _loadUserApp (/var/runtime/UserFunction.js:100:13)","    at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)","    at Object.<anonymous> (/var/runtime/index.js:43:30)","    at Module._compile (internal/modules/cjs/loader.js:999:30)","    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)","    at Module.load (internal/modules/cjs/loader.js:863:32)","    at Function.Module._load (internal/modules/cjs/loader.js:708:14)","    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)","    at internal/main/run_main_module.js:17:47"]}
4

Hi @Kwameowusu,

The repo you shared seems to be empty.

5

The repo is open and working
Kwameowusu/oskcat (github.com)

{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module '@grpc/grpc-js/package.json'\nRequire stack:\n- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs","trace":["Runtime.ImportModuleError: Error: Cannot find module '@grpc/grpc-js/package.json'","Require stack:","- /opt/build/repo/node_modules/@firebase/firestore/dist/index.node.mjs","    at _loadUserApp (/var/runtime/UserFunction.js:100:13)","    at Object.module.exports.load (/var/runtime/UserFunction.js:140:17)","    at Object.<anonymous> (/var/runtime/index.js:43:30)","    at Module._compile (internal/modules/cjs/loader.js:999:30)","    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)","    at Module.load (internal/modules/cjs/loader.js:863:32)","    at Function.Module._load (internal/modules/cjs/loader.js:708:14)","    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)","    at internal/main/run_main_module.js:17:47"]}

I have a product cards which has a dynamic route in nextjs. When I click on the product card i get the above error with firebase

But It works on localhost and vercel

6

Could you try this:

based on:

7

Hey @hrishikesh, I’m facing a similar issue: {"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module '@grpc/grpc-js/package.json'\nRequire stack:\n- /opt/build/repo/frontend/node_modules/@firebase/firestore/dist/index.node.mjs","trace":["Runtime.ImportModuleError: Error: Cannot find module '@grpc/grpc-js/package.json'","Require stack:","- /opt/build/repo/frontend/node_modules/@firebase/firestore/dist/index.node.mjs"," at _loadUserApp (/var/runtime/UserFunction.js:202:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"," at Object.<anonymous> (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"," at internal/main/run_main_module.js:17:47"]}

I ran npm i @grpc/grpc-js, but that didn’t resolve the issue for me. The build ran without any errors. Like @Kwameowusu described, I also have a product search implemented with Elasticsearch Search UI, but when I navigate to a single product that uses getServerSideProps to render the product page based on data from Firestore, I get the error mentioned above.

Any help is really appreciated :slight_smile:

8

I’m still waiting for their response, because of that i abandoned the project on netlify. I’m now using vercel and it worked there

9

Hi @janoschsworkspace,

Could you mention which site this is regarding?

@Kwameowusu, I can see that we had replied and the thread was waiting for your reply.

10

I answered. The repo is opened and working :raised_hand_with_fingers_splayed:t6:

11

Thanks for sharing the repo, @Kwameowusu !

Would you be willing to redeploy using the new plugin version 4 that we released this week and let us know if that helps? :slightly_smiling_face:

12

Sure it’s https://deploy-preview-49–course-platform.netlify.app/. You can recreate the problem by navigating to the /results page and then clicking on one of the courses.

13

Hey @janoschsworkspace,

I checked that deploy and it doesn’t seem you’re using version 4 of the plugin? Could you try that? I checked this deploy: Netlify App

14

Oh of course :man_facepalming:

That fixed the problem, thank you!