FATAL `nuxtCtx.set` is not a function

[PawFV]

Describe the bug When yarn build error happens at the very beggining of the build.

I logged debugged nuxtCtx and it seems like it only gets this properties inside the object

nuxtCtx {
  use: [Function: use],
  call: [Function: call]
}

I'm not so familiar with unctx but replacing

// line 41 
const nuxtCtx = createContext();

while importing createContext bypasses the error but tbh I'm just shooting in the dark and just playing a bit, I lack context literally speaking.

Nuxt:

• v2.15.8
• SSR mode

My package.json

 "dependencies": {
    "@bravadoco/nuxt-redirect": "^1.0.2",
    "@bravadoco/nuxt-timings": "^0.1.33",
    "@lifeomic/axios-fetch": "^2.0.1",
    "@mux/upchunk": "^1.0.6",
    "@nuxtjs/apollo": "^4.0.1-rc.5",
    "@nuxtjs/auth": "Bravado-network/auth-module#master",
    "@nuxtjs/axios": "~5.12.0",
    "@nuxtjs/device": "^2.1.0",
    "@nuxtjs/eslint-module": "^3.0.1",
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/html-validator": "^0.5.0",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sentry": "^5.1.4",
    "@qonfucius/nuxt-prometheus-module": "^0.1.1",
    "activestorage": "5.2.4-3",
    "allsettled-polyfill": "^1.0.4",
    "amplitude-js": "^8.18.1",
    "aos": "^3.0.0-beta.6",
    "body-scroll-lock": "^3.0.1",
    "chart.js": "^2.9.4",
    "confetti-js": "^0.0.18",
    "cookie-universal-nuxt": "^2.1.3",
    "core-js": "2",
    "countup.js": "^2.0.7",
    "date-fns": "^2.11.0",
    "delegated-events": "^1.1.2",
    "graphql": "^15.5.0",
    "hls.js": "^0.13.2",
    "lazysizes": "^5.2.0",
    "lodash": "^4.17.21",
    "markdown": "^0.5.0",
    "marked": "https://github.com/dnmtvf/marked",
    "mobile-detect": "^1.4.5",
    "node-zopfli-es": "^1.0.7",
    "normalize.css": "^8.0.1",
    "nuxt": "2.15.8",
    "nuxt-datadog-trace": "^0.1.2",
    "nuxt-delay-hydration": "^0.3.2",
    "nuxt-helmet": "^2.0.0",
    "nuxt-property-decorator": "^2.9.1",
    "nuxt-seo": "^1.6.1",
    "nuxt-vuex-router-sync": "^0.0.3",
    "plyr": "^3.6.12",
    "portal-vue": "^2.1.7",
    "pryjs": "^1.0.3",
    "quill-mention": "^2.2.5",
    "quill-paste-smart": "^1.4.10",
    "shrink-ray-current": "^4.1.3",
    "siema": "^1.5.1",
    "statsd-client": "^0.4.4",
    "swiper": "6.0.2",
    "tributejs": "Bravado-network/tribute#master",
    "v-emoji-picker": "dnmtvf/V-Emoji-Picker.git",
    "v-mask": "^2.2.3",
    "vue-chartjs": "^3.5.1",
    "vue-gtag": "1.14.0",
    "vue-lazy-hydration": "^2.0.0-beta.4",
    "vue-lottie": "^0.2.1",
    "vue2-editor": "^2.10.2",
    "vue2-touch-events": "^2.2.1",
    "vuedraggable": "^2.23.2",
    "vuejs-datepicker": "Bravado-network/vuejs-datepicker#master",
    "vuelidate": "^0.7.5",
    "wavesurfer.js": "^3.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
    "@babel/preset-env": "^7.9.6",
    "@graphql-codegen/cli": "^2.3.1",
    "@graphql-codegen/introspection": "^2.1.1",
    "@graphql-codegen/typescript": "^2.4.2",
    "@graphql-codegen/typescript-graphql-files-modules": "^2.1.1",
    "@graphql-codegen/typescript-operations": "^2.2.2",
    "@graphql-codegen/typescript-resolvers": "^2.4.3",
    "@nuxt/image": "^0.6.2",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "2.1.0",
    "@nuxtjs/color-mode": "^2.0.2",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@storybook/addon-actions": "^6.4.19",
    "@storybook/addon-essentials": "^6.4.19",
    "@storybook/addon-knobs": "^6.4.0",
    "@storybook/addon-links": "^6.4.19",
    "@storybook/addon-storysource": "^6.4.19",
    "@storybook/vue": "^6.4.19",
    "@types/amplitude-js": "^8.16.0",
    "@types/faker": "^5.1.4",
    "@types/jest": "^27.0.1",
    "@types/lodash": "^4.14.167",
    "@types/lodash-webpack-plugin": "^0.11.6",
    "@types/svgo": "^2.6.3",
    "@types/vuelidate": "^0.7.14",
    "@types/webpack-env": "^1.16.0",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^26.0.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-lodash": "^3.3.4",
    "babel-preset-vue": "^2.0.2",
    "chalk": "^4.1.2",
    "chrome-launcher": "^0.13.4",
    "chromedriver": "^94.0.0",
    "css-loader": "5.2.7",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vuejs-accessibility": "^1.2.0",
    "faker": "^5.1.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.0.1",
    "jest-extended": "^0.11.5",
    "jest-serializer-vue": "^2.0.2",
    "jest-transform-stub": "^2.0.0",
    "lighthouse": "^7.3.0",
    "lodash-webpack-plugin": "^0.11.6",
    "node-html-parser": "^5.1.0",
    "node-sass": "^5.0",
    "nuxt-font-loader": "^1.1.3",
    "prettier": "^2.5.1",
    "puppeteer": "^10.4.0",
    "request": "^2.88.2",
    "sass-loader": "10.1.1",
    "stylelint": "^13.2.0",
    "stylelint-config-standard": "^20.0.0",
    "svgo": "^2.8.0",
    "ts-jest": "^26.4.3",
    "vue-jest": "^3.0.5",
    "vue-loader": "15.9.8",
    "vue-svg-loader": "^0.16.0",
    "yargs": "^16.2.0"
  },

If I can do anything else to fix the issue or any more context you may need just tell me, thanks!

[harlan-zw]

Hey @PawFV

Thanks for the detailed issue! Looks like an issue with the nuxt kit the package was using. I've migrated this package to nuxt-module-builder and cleaned up a few things which should resolve this issue.

Can you try with 0.4.3 and let me know if you still have issues.

Thanks

[PawFV]

@harlan-zw hey updated the package but the probleme persists, I'm having the exact same error.

As it might be really hard to replicate (I'm working with a huge Nuxt app) we can go to a debugging session in my env if you like, just lmk anything I can do, if this module works as I think it works it will solve a lot of problems we have currently because of huge hydration.

Even with a lot of techniques like lazy-loading 3rd party, optimizing plugins, lazy hydrate and so on we still can't get a good lighthouse score on mobile, half of our bundle size LH say's it's unused, we can't technically remove GRAPHQL from our bundle, idk what the hell is that metric but anyways...

[harlan-zw]

Hmm it seems like something specific to your project. I've again tried to replicate it without success here: https://stackblitz.com/edit/nuxt-starter-9vbury?file=nuxt.config.js

Could you try:

• npm why unctx
• npm why @nuxt/kit
• see if you can replicate the error in stackblitz

[PawFV]

@harlan-zw Sorry for the delay!

# npm why unctx
[email protected]
node_modules/unctx
  unctx@"^0.0.3" from @nuxt/[email protected]
  node_modules/@nuxt/kit
    @nuxt/kit@"0.6.4" from @bravadoco/[email protected]
    node_modules/@bravadoco/nuxt-timings
      @bravadoco/nuxt-timings@"^0.1.33" from the root project

# npm why @nuxt/kit
@nuxt/[email protected]
node_modules/@nuxt/kit
  @nuxt/kit@"0.6.4" from @bravadoco/[email protected]
  node_modules/@bravadoco/nuxt-timings
    @bravadoco/nuxt-timings@"^0.1.33" from the root project

[harlan-zw]

Hey @PawFV, I've pushed an update for the package to use the latest RC of @nuxt/kit. If that doesn't solve it you may need to try removing the module @bravadoco/nuxt-timings from your package.json and re-install deps.

Seems as though it's locked @nuxt/kit and unctx to a very early version.

That's my best guess as to the issue, if that doesn't solve it, please feel free to re-open this issue