"An unexpected error occured" NextJS 13 + Konva

[janlin002]

[REQUIRED] Environment info

Node: v18.18.2

Firebase: ^7.10.0

Next: ^13.1.2

firebase-tools: 13.0.3

Platform: MacBook Air M2 (Sonoma 14.2.1)

[REQUIRED] Test case

firebase deploy --only hosting

[REQUIRED] Steps to reproduce

1. firebase init hosting
2. Detected an existing Next.js codebase in the current directory, should we use this? Y
3. In which region would you like to host server-side content, if applicable? asia-east1 (Taiwan)
4. Set up automatic builds and deploys with GitHub? N
5. Firebase initialization complete!
6. firebase deploy (fail) (Before I joined Konva, deployment was successful.)

[REQUIRED] Expected behavior

hosting will be deployed

[REQUIRED] Actual behavior

hosting is built, but the deploiement fails with the following error :

Error: An unexpected error has occurred.

firebase-debug.log

[debug] [2024-02-01T08:55:23.869Z] ----------------------------------------------------------------------
[debug] [2024-02-01T08:55:23.869Z] Command:       /Users/jan/.nvm/versions/node/v18.18.2/bin/node /Users/jan/.nvm/versions/node/v18.18.2/bin/firebase deploy
[debug] [2024-02-01T08:55:23.870Z] CLI Version:   13.1.0
[debug] [2024-02-01T08:55:23.870Z] Platform:      darwin
[debug] [2024-02-01T08:55:23.870Z] Node Version:  v18.18.2
[debug] [2024-02-01T08:55:23.875Z] Time:          Thu Feb 01 2024 16:55:23 GMT+0800 (Central Standard Time)
[debug] [2024-02-01T08:55:23.875Z] ----------------------------------------------------------------------
[debug] 
[debug] [2024-02-01T08:55:23.906Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"]
[debug] [2024-02-01T08:55:23.906Z] > authorizing via signed-in user (123davidbill@oneclass.tw)
[debug] [2024-02-01T08:55:23.906Z] [iam] checking project question-component-demo for permissions ["firebase.projects.get","firebasehosting.sites.update"]
[debug] [2024-02-01T08:55:23.907Z] > refreshing access token with scopes: []
[debug] [2024-02-01T08:55:23.908Z] >>> [apiv2][query] POST https://www.googleapis.com/oauth2/v3/token [none]
[debug] [2024-02-01T08:55:23.908Z] >>> [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted]
[debug] [2024-02-01T08:55:24.017Z] <<< [apiv2][status] POST https://www.googleapis.com/oauth2/v3/token 200
[debug] [2024-02-01T08:55:24.017Z] <<< [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted]
[debug] [2024-02-01T08:55:24.029Z] >>> [apiv2][query] POST https://cloudresourcemanager.googleapis.com/v1/projects/question-component-demo:testIamPermissions [none]
[debug] [2024-02-01T08:55:24.029Z] >>> [apiv2][(partial)header] POST https://cloudresourcemanager.googleapis.com/v1/projects/question-component-demo:testIamPermissions x-goog-quota-user=projects/question-component-demo
[debug] [2024-02-01T08:55:24.029Z] >>> [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/question-component-demo:testIamPermissions {"permissions":["firebase.projects.get","firebasehosting.sites.update"]}
[debug] [2024-02-01T08:55:24.890Z] <<< [apiv2][status] POST https://cloudresourcemanager.googleapis.com/v1/projects/question-component-demo:testIamPermissions 200
[debug] [2024-02-01T08:55:24.891Z] <<< [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/question-component-demo:testIamPermissions {"permissions":["firebase.projects.get","firebasehosting.sites.update"]}
[debug] [2024-02-01T08:55:24.893Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/question-component-demo [none]
[debug] [2024-02-01T08:55:25.364Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/question-component-demo 200
[debug] [2024-02-01T08:55:25.364Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/question-component-demo {"projectId":"question-component-demo","projectNumber":"784916059687","displayName":"question-component-demo","name":"projects/question-component-demo","resources":{"hostingSite":"question-component-demo"},"state":"ACTIVE","etag":"1_a142c992-5dae-456f-b52f-56492cf9d479"}
[debug] [2024-02-01T08:55:35.755Z] SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at findDependency (/Users/jan/.nvm/versions/node/v18.18.2/lib/node_modules/firebase-tools/lib/frameworks/utils.js:188:23)
    at prepareFrameworks (/Users/jan/.nvm/versions/node/v18.18.2/lib/node_modules/firebase-tools/lib/frameworks/index.js:123:67)
    at deploy (/Users/jan/.nvm/versions/node/v18.18.2/lib/node_modules/firebase-tools/lib/deploy/index.js:55:54)
    at Command.actionFn (/Users/jan/.nvm/versions/node/v18.18.2/lib/node_modules/firebase-tools/lib/commands/deploy.js:100:32)
    at /Users/jan/.nvm/versions/node/v18.18.2/lib/node_modules/firebase-tools/lib/command.js:228:25
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[error] 
[error] Error: An unexpected error has occurred.

[aalej]

Hey @janlin002, thanks for sharing your debug logs and for filing a detailed report. I’m currently trying to reproduce this, but so far I haven’t encountered any issues with deploying. Could you try running it locally using firebase emulators:start to see if any errors would be raised?

Also, could you share some details on how you set up your Next.js project? What dependencies do you currently have installed? If possible, could you share an MCVE so that we can reproduce the issue locally?

Lastly, could you elaborate what you mean by "Before I joined Konva, deployment was successful."?

[janlin002]

@aalej The results I executed on the terminal are as follows:

firebase emulators:start

i  emulators: Starting emulators: hosting
i  emulators: Shutting down emulators.
i  hub: Stopping emulator hub

Error: An unexpected error has occurred.

The error message is the same as above

This is what dependencies my currently project installed

{
  "name": "question-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@iconify/react": "^4.1.1",
    "@mui/material": "^5.15.4",
    "@types/lodash": "^4.14.191",
    "@types/pako": "^2.0.0",
    "canvas": "^2.5.0",
    "examComponent": "workspace:*",
    "firebase": "^7.10.0",
    "lodash": "^4.17.21",
    "next": "^13.1.2",
    "pako": "^2.1.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20.11.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "typescript": "^5.2.2"
  }
}

and this is my project next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: false,
  trailingSlash: false,
  // output: 'export',
  transpilePackages: ['hooks', 'utils', 'constants'],
  // experimental: {
  //   esmExternals: 'loose', // required to make Konva & react-konva work
  // },
  distDir: '.next',
};

module.exports = nextConfig;

Before I joined Konva, deployment was successful.

While using the Lines feature of Konva, I can deploy it successfully. However, when I add the Texts feature, it leads to deployment failure."