Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

πŸ› BUG: "Cannot convert object to primitive value" at publish time #2081

Closed
brendonmatos opened this issue Oct 26, 2022 · 22 comments
Closed
Assignees
Labels
bug Something that isn't working pages Relating to Pages

Comments

@brendonmatos
Copy link

brendonmatos commented Oct 26, 2022

What version of Wrangler are you using?

2.1.13

What operating system are you using?

Mac M1

Describe the Bug

Pushing my nuxt 3 website from local and github actions, I get the following error:

❯ yarn workspace @hack/hack.com deploy
 ⛅️ wrangler 2.1.13 
--------------------
Running custom build: NITRO_PRESET=cloudflare yarn nuxt build
Nuxi 3.0.0-rc.13-27779809.b010e3e                                                                                                  10:47:01
Nuxt 3.0.0-rc.13-27779809.b010e3e with Nitro 0.6.1-27778247.5a75f37                                                                10:47:01
WILL SETUP TAILWIND!!!                                                                                                             10:47:01
SETUP COMPLETE!!!                                                                                                                  10:47:01
β„Ή Using default Tailwind CSS file from runtime/tailwind.css                                                       nuxt:tailwindcss 10:47:01
β„Ή Client built in 1840ms                                                                                                           10:47:04
β„Ή Building server...                                                                                                               10:47:04
βœ” Server built in 588ms                                                                                                            10:47:05
βœ” Generated public .output/public                                                                                            nitro 10:47:05
β„Ή Building Nitro Server (preset: cloudflare)                                                                                 nitro 10:47:05
βœ” Nitro server built                                                                                                         nitro 10:47:14
  └─ .output/server/index.mjs (1.26 MB) (340 kB gzip)
Ξ£ Total size: 1.26 MB (340 kB gzip)
βœ” You can preview this build using npx wrangler dev .output/server/index.mjs --site .output/public --local                   nitro 10:47:14
βœ” You can deploy this build using npx wrangler publish                                                                       nitro 10:47:14

Reading _nuxt/bg.66f7b96c.svg...
Skipping - already uploaded.
Reading _nuxt/entry.16f5fac9.css...
Skipping - already uploaded.
Reading _nuxt/entry.20485e58.js...
Skipping - already uploaded.
Reading _nuxt/error-404.4cf85664.css...
Skipping - already uploaded.
Reading _nuxt/error-404.8b61b839.js...
Skipping - already uploaded.
Reading _nuxt/error-500.0840c7e1.js...
Skipping - already uploaded.
Reading _nuxt/error-500.bddb6786.css...
Skipping - already uploaded.
Reading _nuxt/error-component.942be2ad.js...
Skipping - already uploaded.
Reading _nuxt/index.d4bbdb4a.css...
Skipping - already uploaded.
Reading _nuxt/index.d7d5c4a0.js...
Skipping - already uploaded.
↗️  Done syncing assets
Total Upload: 1707.68 KiB / gzip: 381.96 KiB

✘ [ERROR] A request to the Cloudflare API (/accounts/cb2a436242e067a239fef867877ec6fd/workers/scripts/hack) failed.

  Uncaught TypeError: Cannot convert object to primitive value
    at worker.js:22345:471
    at worker.js:32316:4
    at worker.js:32317:3
   [code: 10021]

  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/wrangler2/issues/new/choose

It's kind of weird because I have two nuxt projects in the same monorepo and only this one gives this error. The only difference between these two projects is the one with the problem I'm using Firebase Firestore .

Running locally + some console.log's

/private/var/folders/q7/7xksn2wx0dj486bq5yvsjzc00000gn/T/tmp-53310-q0l6XrQczK3c/index.js:22347
    const defaultResponseHeaders = { [GRPC_ACCEPT_ENCODING_HEADER]: "identity,deflate,gzip", [GRPC_ENCODING_HEADER]: "identity", [http2$1.constants.HTTP2_HEADER_STATUS]: http2$1.constants.HTTP_STATUS_OK, [http2$1.constants.HTTP2_HEADER_CONTENT_TYPE]: "application/grpc+proto" }, defaultResponseOptions = { waitForTrailers: true };
                                                                                                                                                    ^

TypeError: Cannot convert object to primitive value

Logging the http2 in the setup phase

-----------------------------------------
http2 {                                                                                                                            14:15:28
  connect: [Function: connect],
  constants: {
    NGHTTP2_ERR_FRAME_SIZE_ERROR: -522,
    ...
}
http2.constants {                                                                                                                  14:15:28
  NGHTTP2_ERR_FRAME_SIZE_ERROR: -522,
  NGHTTP2_SESSION_SERVER: 0,
  ...
}
http2.constants.HTTP2_HEADER_STATUS :status                                                                                        14:15:28
http2.constants.HTTP2_HEADER_CONTENT_TYPE content-type                                                                             14:15:28
-----------------------------------------    

Logging the http2 in the "execution phase"

----------------------------------------
http2 [Function: fn]
http2.constants [Function: fn]
http2.constants.HTTP2_HEADER_STATUS [Function: fn]
http2.constants.HTTP2_HEADER_CONTENT_TYPE [Function: fn]
-----------------------------------------

This difference is causing the problem when using these values as dynamic map key.

@brendonmatos brendonmatos added the bug Something that isn't working label Oct 26, 2022
@JacobMGEvans
Copy link
Contributor

This is very interesting. I would be interested in chatting more on this, are you on the Cloudflare Discord?

@caass
Copy link
Contributor

caass commented Nov 14, 2022

@JacobMGEvans did y'all reach any conclusions on this?

@caass caass added the awaiting reporter response Needs clarification or followup from OP label Nov 14, 2022
@JacobMGEvans
Copy link
Contributor

@JacobMGEvans did y'all reach any conclusions on this?

Not currently, no.

@luc122c
Copy link

luc122c commented Nov 27, 2022

Hi There, I think I'm having the same issue with a Nuxt 3 build to Cloudflare Pages Functions.

I've created a StackBlitz with a minimal reproduction: https://stackblitz.com/edit/nuxt-wrangler-firebase-bug?file=server/middleware/admin.ts

My environment details
node -v
v16.18.1
yarn wrangler -v
 ⛅️ wrangler 2.4.4 
yarn nuxt -v
Nuxi 3.0.0    

@JacobMGEvans JacobMGEvans removed the awaiting reporter response Needs clarification or followup from OP label Nov 28, 2022
@JacobMGEvans JacobMGEvans added the pages Relating to Pages label Nov 28, 2022
@benjaminbalazs
Copy link

benjaminbalazs commented Mar 18, 2023

Exact same issue here, using Firebase Admin too, Nuxt 3, Nitro.

@brendonmatos
Copy link
Author

One of the ways I found to work around this problem is to overwrite some things in the build:

file: grpc-js/build/src/server-call.js

const http2HeaderStatusSafe = ':status';
const http2HeaderContentTypeSafe = 'content-type';
const httpStatusOk = 200

const defaultResponseHeaders = {
  // TODO(cjihrig): Remove these encoding headers from the default response
  // once compression is integrated.
  [GRPC_ACCEPT_ENCODING_HEADER]: 'identity,deflate,gzip',
  [GRPC_ENCODING_HEADER]: 'identity',
  [http2HeaderStatusSafe]: httpStatusOk,
  [http2HeaderContentTypeSafe]: 'application/grpc+proto',
};

@chrisspiegl
Copy link

This looks very good. How did you do the overwriting? Did you manually mock the http2 or did you patch it with pnpm? Or something?

@brendonmatos
Copy link
Author

I'm working inside of a monorepo, so cloned the grpc-js repository into the project and added the path in pnpm overrides:

{
  "name": "@brendonmatos/web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "test": "turbo run test",
    "lint": "turbo run lint",
    "dev": "turbo run dev"
  },
  "workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ]
  },
  "pnpm": {
    "overrides": {
      "@grpc/grpc-js": "./packages/grpc-js"
    }
  }
}

@brendonmatos
Copy link
Author

@JacobMGEvans Yes! I'm on Cloudflare Server, Brendon#8334

@LilaRest
Copy link

LilaRest commented Apr 4, 2023

I'm experiencing the same problem when pushing a Nuxt 3 web app that returns non-string values from its API endpoints.
Any news on this bug ?

@LilaRest
Copy link

LilaRest commented Apr 4, 2023

The nuxt-security module also cause the same error when enabled.

@LilaRest
Copy link

LilaRest commented Apr 4, 2023

After some troubleshooting, I've figured the nuxt-security module was causing those errors on my non-string API endpoints. After disabling it, all works fine.

This is still related to Cloudflare since the nuxt-security module works fine on Vercel or Netlify.

@reinsp5
Copy link

reinsp5 commented Jun 22, 2023

Hi everyone.
Any progress on this bug?
I am also building a web application using Firebase. Initially, I created it in SPA, but because the OGP images were not loading properly in Twitter and other social networking sites, I removed the ssr:false in nuxt.config.ts and changed it to SSR.

The npx nuxi build completed successfully.
However, when I run npx wrangler pages dev dist/, I get this error.
The preset for nitro was cloudflare-pages.

Environment
Node: v18.16.0
Nuxt: v3.5.3
Nitro: v2.4.1
wrangler: v3.1.1

@jontybrook
Copy link

I am also experincing this issue. Also with Nuxt 3, Nitro, Firebase, Cloudflare Workers. I am not using nuxt-security. Will update if I find a workaround.

@brendonmatos
Copy link
Author

Firebase uses -> grpc-js, that uses -> http2

It seems that the problem lies in the failure or lack of implementation of this http2 polyfill in workers runtime.

@reinsp5
Copy link

reinsp5 commented Jun 23, 2023

Thank you. I hope this issue will be resolved.

I was then able to display the OGP image in SPA, so I reverted the app back to SPA again. It was my lack of awareness.

Now it works with Cloudflare Pages without any problem.

@brendonmatos
Copy link
Author

Related unjs/unenv#86

@rhaenni
Copy link

rhaenni commented Nov 4, 2023

I have the same issue trying to use the @AWS-SDK v3 in a Nuxt 3 project deploying to Cloudflare Pages with wrangler, it works fine in local Nuxt 3 builds and also when deploying to Vercel though.

The aws-sdk works perfectly fine in a browser environment too, but somehow it thinks its running in a full node environment when building with the Nuxt3/Nitro cloudflare_pages preset for Cloudflare/wrangler, is there any way to tell it to just use browser mode?

TypeError: Cannot convert object to primitive value                                                                                                                                                                                                                                                         
    at join (file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:9084:21)                                                                                                                                                                                                                
    at e3.getCredentialsFilepath (file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:9919:142)                                                                                                                                                                                          
    at td.loadSharedConfigFiles (file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:9923:58)                                                                                                                                                                                            
    at file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:10018:123                                                                                                                                                                                                                     
    at file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:5820:26                                                                                                                                                                                                                       
    at async coalesceProvider (file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:5833:16)                                                                                                                                                                                              
    at async file:///C:/myproject/.wrangler/tmp/dev-KdXMtT/jrcnx69sina.js:5839:101  

@joelee1992
Copy link

I have a similar issue related to mailgun.js. I tried to send an email locally, and it works perfectly. However, on Cloudflare Page, it returns a status code 500 and an error message: 'Cannot convert object to primitive value.' Could you help me identify which part is causing the issue?

here is my package.json
{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "NITRO_PRESET=cloudflare-pages nuxt build", "dev": "nuxt dev --port=3002", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", "pages:dev": "wrangler pages dev --compatibility-date=2023-11-21 --proxy 3000 -- npm run dev", "pages:deploy": "npm run build && wrangler pages deploy ./dist" }, "devDependencies": { "@babel/eslint-parser": "^7.23.3", "@babel/preset-env": "^7.23.3", "@nuxt/devtools": "latest", "@nuxtjs/axios": "^5.13.6", "@nuxtjs/eslint-config-typescript": "^12.1.0", "@nuxtjs/eslint-module": "^4.1.0", "@types/js-cookie": "^3.0.6", "eslint": "^8.54.0", "eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-vue": "^9.18.1", "eslint-plugin-vuetify": "^2.1.0", "form-data": "^4.0.0", "js-cookie": "^3.0.5", "libphonenumber-js": "^1.10.51", "nuxt": "^3.8.2", "nuxt-security": "^0.14.4", "sass": "^1.69.5", "vite-plugin-eslint": "^1.8.1", "vite-plugin-vuetify": "^1.0.2", "vue": "^3.3.8", "vue-router": "^4.2.5", "vuetify": "^3.4.3", "wrangler": "^3.17.1" }, "dependencies": { "@mdi/font": "^7.3.67", "@stripe/stripe-js": "^2.2.1", "@types/cookie-parser": "^1.4.6", "@types/graylog2": "^0.2.5", "dotenv": "^16.3.1", "graylog2": "^0.2.1", "mailgun.js": "^8.0.6", "vee-validate": "^4.12.2", "vue-recaptcha": "^2.0.3", "vuex": "^4.0.2" } }

and here is my mailgun code:
`import Mailgun from 'mailgun.js'
import FormData from 'form-data'

export default defineEventHandler(async (event: any) => {
const mailgun = new Mailgun(FormData)

const mg = mailgun.client({ username: 'api', key: process.env.MAILGUN_KEY || '' })

const body = await readBody(event)

const data = {
from: ${body.name} <${body.email}>,
to: process.env.MAIL_TO,
subject: body.subject,
text: body.message,
html: <html><body><p>Name : ${body.name}</p><p>Email : ${body.email}</p><p>Phone : ${body.phoneNumber}</p><p>Message : ${body.message}</p></body></html>
}

return mg.messages
.create(process.env.MAIL_DOMAIN || '', data)
.then((response: any) => {
return response
})
.catch((err: any) => {
throw createError({
statusCode: err
})
})
})
`

@chrisspiegl
Copy link

@brendonmatos Interesting to close this issue. Can you give a bit of context how you solved the issue / why it is no longer an issue? Thank you.

@brendonmatos
Copy link
Author

brendonmatos commented Dec 21, 2023

I genuinely feel that this might not be directly associated with Cloudflare itself. It appears to be more of a Nuxt/Nitro/Unenv issue, as indicated in the related issues. unjs/unenv#86
unjs/unenv#92

@luizzappa
Copy link

If you are using Nuxt and need to use aws-sdk, the workaround is to use aws4fetch, which works with cloudflare worker.

I just needed to create a plugin to work with Nuxt running locally (no need for Worker). I set the environment by the env environment variable:

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();

  if (process.server && config.public.env.toLocaleLowerCase() !== 'prod') {
    const crypto = require('crypto');
    global.crypto = crypto;
  }
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something that isn't working pages Relating to Pages
Projects
None yet
Development

No branches or pull requests