nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt
https://tailwindcss.nuxtjs.org
MIT License
1.69k stars 183 forks source link

Nuxt 2 Node 18 compatibility issue #921

Closed perreta closed 3 days ago

perreta commented 4 days ago

I have a legacy Nuxt 2 project that I am trying to update to Node version 18. I have done this for other projects with relative ease, but suddenly I am encountering issues that might be stemming from @nuxtjs/tailwindcss, and I am curious if people have guidance. For previous projects I have updated to Nuxt@2.17.1 as a dependency, updated @nuxtjs/tailwindcss@6.12.1 as a devDependency. For other projects this has worked, but now I am encountering this issue:

FATAL nuxtCtx.tryUse is not a function 5:10:40 PM

at tryUseNuxt (node_modules/@nuxt/kit/dist/index.mjs:41:18) at ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2102:14) at node_modules/@nuxtjs/tailwindcss/dist/module.cjs:2:53 at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:167:20) at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:34:7) at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:342:5)

╭─────────────────────────────────────────────────╮ │ │ │ ✖ Nuxt Fatal Error │ │ │ │ TypeError: nuxtCtx.tryUse is not a function │ │ │ ╰─────────────────────────────────────────────────╯

I am just not sure why this is causing a problem now when I have successfully done this node version upgrade on other Nuxt 2 projects. Any help or ideas greatly appreciated.

ineshbose commented 4 days ago

Thanks for opening an issue. I'm not 100% sure that it could be because of the module. It seems like to be from core/kit. Could you share your package json and hopefully try create a minimum reproduction please?

perreta commented 4 days ago

I will work on a reproduction, in the meantime, this is my package.json:

{ "name": "project", "version": "1.0.0", "description": "An ecommerce website", "author": "perreta", "homepage": "https://github.com/", "private": true, "engines": { "node": ">=14.0.0 <19.0.0" }, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@nuxtjs/sanity": "^0.10.0", "@nuxtjs/style-resources": "^1.0.0", "@sanity/client": "^1.148.3", "@sanity/image-url": "^0.140.22", "axios": "^0.21.4", "cookie-universal-nuxt": "^2.1.5", "cors": "^2.8.5", "defu": "^5.0.0", "express": "^4.17.1", "i": "^0.3.7", "install": "^0.13.0", "lodash": "^4.17.21", "npm": "^9.8.1", "nuxt": "2.17.1", "nuxt-jsonld": "^1.5.1", "nuxt-shopify": "^1.10.8", "portal-vue": "^2.1.7", "vue-flickity": "^1.2.1", "vue-image-zoomer": "1.5.0", "vue-mailchimp-subscribe": "^1.1.0", "webfontloader": "^1.6.28" }, "devDependencies": { "@nuxt/kit": "3.12.4", "@nuxtjs/tailwindcss": "6.12.", "eslint": "^7.28.0", "eslint-plugin-vue": "^7.11.1", "prettier": "^2.8.2", "prettier-eslint": "^12.0.0", "sass": "^1.65.1", "sass-loader": "^10.1.1", "vue-svg-loader": "^0.16.0" }, "optionalDependencies": { "fsevents": "^2.3.2" } }

For what it's worth this is the package.json of a project running on node version 18 and nuxt 2.17.1:

{ "name": "project2", "version": "1.0.0", "description": "A different ecommerece website", "author": "perreta", "homepage": "https://github.com/", "private": true, "engines": { "node": ">=14.0.0 <19.0.0" }, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@nuxtjs/axios": "^5.13.6", "@nuxtjs/sanity": "^0.9.4", "@nuxtjs/style-resources": "^1.0.0", "@sanity/client": "^1.148.3", "@sanity/image-url": "^0.140.22", "axios": "^0.21.4", "cookie-universal-nuxt": "^2.1.5", "cors": "^2.8.5", "defu": "^5.0.0", "express": "^4.17.1", "lodash": "^4.17.21", "multer": "^1.4.5-lts.1", "nodemailer": "^6.8.0", "nuxt": "2.17.1", "nuxt-delay-hydration": "^0.4.7", "nuxt-jsonld": "^1.5.1", "nuxt-shopify": "^1.14.0", "sass": "^1.65.1", "ufo": "^1.2.0", "vue-flickity": "^1.2.1", "vue-scrollto": "^2.20.0", "webfontloader": "^1.6.28" }, "devDependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@nuxtjs/tailwindcss": "^6.10.4", "eslint": "^7.28.0", "eslint-plugin-vue": "^7.11.1", "prettier": "^2.3.1", "prettier-eslint": "^12.0.0", "sass-loader": "^10.1.1", "vue-svg-loader": "^0.16.0" } }

perreta commented 3 days ago

So I figured it out ! On the off chance anyone else has this issue, the problem using @nuxtjs/sanity@0.10.0 as opposed to @nuxtjs/sanity@0.9.4. The newer version has a dependency of @nuxt/kit at version "@nuxt/kit": "0.6.4", which caused conflict with the version of @nuxt/kit being called in @nuxtjs/tailwindcss@6.12.2 ("@nuxt/kit": "^3.13.2").