search

harlan-zw / nuxt-delay-hydration

Delayed hydration for progressively enhanced apps. Reduced blocking time and improved Google Lighthouse scores. ⚡️
MIT License
369 stars 22 forks source link

FATAL `nuxtCtx.set` is not a function #6

Closed PawFV closed 2 years ago

PawFV commented 2 years ago

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

image

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:

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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:

PawFV commented 2 years ago

@harlan-zw Sorry for the delay!

# npm why unctx
unctx@0.0.3
node_modules/unctx
  unctx@"^0.0.3" from @nuxt/kit@0.6.4
  node_modules/@nuxt/kit
    @nuxt/kit@"0.6.4" from @bravadoco/nuxt-timings@0.1.33
    node_modules/@bravadoco/nuxt-timings
      @bravadoco/nuxt-timings@"^0.1.33" from the root project
# npm why @nuxt/kit
@nuxt/kit@0.6.4
node_modules/@nuxt/kit
  @nuxt/kit@"0.6.4" from @bravadoco/nuxt-timings@0.1.33
  node_modules/@bravadoco/nuxt-timings
    @bravadoco/nuxt-timings@"^0.1.33" from the root project
harlan-zw commented 2 years ago

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