Could not compile templates ui.colors.mjs & ui.colors.d.ts
ChamperNet opened this issue · comments
Version
@nuxtjs/tailwindcss: 6.11.2
nuxt: 3.10.0
node: 18.17.1
Steps to reproduce
Clean project with nuxt & tailwind module.
Just install Tailwind module with pnpm, run pnpm dev and got that errors.
No tailwind.config.{js|ts} provided
In nuxt.config.ts module '@nuxtjs/tailwindcss' is included in modules array.
package.json:
"devDependencies": {
"@nuxt/image": "^1.3.0",
"@nuxtjs/apollo": "5.0.0-alpha.11",
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@nuxtjs/eslint-module": "^4.1.0",
"@nuxtjs/google-fonts": "^3.1.3",
"@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
"@nuxtjs/seo": "^2.0.0-rc.7",
"@nuxtjs/tailwindcss": "^6.11.2",
"@pinia-plugin-persistedstate/nuxt": "^1.2.0",
"@pinia/nuxt": "^0.5.1",
"@vueuse/core": "^10.7.2",
"@vueuse/nuxt": "^10.7.2",
"eslint": "^8.56.0",
"nuxt": "^3.10.0",
"vue": "^3.4.15",
"vue-router": "^4.2.5"
},
"dependencies": {
"@nuxt/ui": "^2.13.0",
"graphql-tag": "^2.12.6",
"nuxt-swiper": "^1.2.2"
}
What is Expected?
Compile without errors.
What is actually happening?
Could not compile template ui.colors.mjs.
Could not compile template ui.colors.d.ts.
Seems like a @nuxt/ui thing - you should rather specify that in your modules without @nuxtjs/tailwindcss as it'll install it for you.
Feel free to share more context, such as your nuxt.config contents, etc.
Seems like a
@nuxt/uithing - you should rather specify that in your modules without@nuxtjs/tailwindcssas it'll install it for you.Feel free to share more context, such as your nuxt.config contents, etc.
Does @nuxt/ui include a tailwind module?
my nuxt.config.ts:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
// DevTools
devtools: {
enabled: true
},
// SSR
ssr: true,
// Modules
modules: [
'@nuxtjs/apollo',
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss',
'@nuxtjs/i18n',
'@nuxt/image',
'@nuxtjs/google-fonts',
'@nuxtjs/seo',
'@nuxt/ui',
['@pinia/nuxt',
{
autoImports: ['defineStore', 'acceptHMRUpdate']
}
],
'@pinia-plugin-persistedstate/nuxt',
'@vueuse/nuxt',
'nuxt-swiper'
],
// Apollo
apollo: {
clients: {
default: {
httpEndpoint:
process.env.STRAPI_GRAPHQL || 'http://127.0.0.1:1337/graphql',
httpLinkOptions: {
credentials: 'same-origin'
},
authType: 'Bearer',
authHeader: 'Authorization',
tokenName: 'strapi_jwt'
}
}
},
// Pinia
piniaPersistedstate: {
storage: 'localStorage',
debug: process.env.ENV === 'development'
},
imports: {
dirs: ['stores']
},
// Tailwind
tailwindcss: {
cssPath: '~/assets/css/tailwind.css',
configPath: 'tailwind.config'
// exposeConfig: false,
// config: {},
// injectPosition: 0,
// viewer: true,
},
// i18n
i18n: {
lazy: true,
langDir: 'locales',
locales: [
{code: 'en', iso: 'en', file: 'en.json'},
{code: 'ru', iso: 'ru', file: 'ru.json'}
],
defaultLocale: 'en',
strategy: 'no_prefix',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root'
}
},
// Eslint
eslint: {
cache: process.env.ENV === 'development'
},
sourcemap: {
server: process.env.ENV === 'development',
client: process.env.ENV === 'development'
},
// Google Fonts
googleFonts: {
display: 'swap',
prefetch: true,
useStylesheet: true,
preload: true,
preconnect: true,
download: true,
families: {
Questrial: [400, 500, 700]
}
},
image: {
strapi: {
baseURL: process.env.APP_URL ?? 'http://localhost:1337/uploads/'
}
}
})
tailwind.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Does @nuxt/ui include a tailwind module?
Yes.
my nuxt.config.ts:
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ // DevTools devtools: { enabled: true }, // SSR ssr: true, // Modules modules: [ '@nuxtjs/apollo', '@nuxtjs/eslint-module', '@nuxtjs/tailwindcss', '@nuxtjs/i18n', '@nuxt/image', '@nuxtjs/google-fonts', '@nuxtjs/seo', '@nuxt/ui', ['@pinia/nuxt', { autoImports: ['defineStore', 'acceptHMRUpdate'] } ], '@pinia-plugin-persistedstate/nuxt', '@vueuse/nuxt', 'nuxt-swiper' ], // Apollo apollo: { clients: { default: { httpEndpoint: process.env.STRAPI_GRAPHQL || 'http://127.0.0.1:1337/graphql', httpLinkOptions: { credentials: 'same-origin' }, authType: 'Bearer', authHeader: 'Authorization', tokenName: 'strapi_jwt' } } }, // Pinia piniaPersistedstate: { storage: 'localStorage', debug: process.env.ENV === 'development' }, imports: { dirs: ['stores'] }, // Tailwind tailwindcss: { cssPath: '~/assets/css/tailwind.css', configPath: 'tailwind.config' // exposeConfig: false, // config: {}, // injectPosition: 0, // viewer: true, }, // i18n i18n: { lazy: true, langDir: 'locales', locales: [ {code: 'en', iso: 'en', file: 'en.json'}, {code: 'ru', iso: 'ru', file: 'ru.json'} ], defaultLocale: 'en', strategy: 'no_prefix', detectBrowserLanguage: { useCookie: true, cookieKey: 'i18n_redirected', redirectOn: 'root' } }, // Eslint eslint: { cache: process.env.ENV === 'development' }, sourcemap: { server: process.env.ENV === 'development', client: process.env.ENV === 'development' }, // Google Fonts googleFonts: { display: 'swap', prefetch: true, useStylesheet: true, preload: true, preconnect: true, download: true, families: { Questrial: [400, 500, 700] } }, image: { strapi: { baseURL: process.env.APP_URL ?? 'http://localhost:1337/uploads/' } } })tailwind.css:
@tailwind base; @tailwind components; @tailwind utilities;
You'd definitely want to remove @nuxtjs/tailwindcss from there as @nuxt/ui installs it with some configuration and hooks that integrate it with this module. Let me know if the issue still persists after doing so and I'll reopen.
Thank you! Deleting @nuxtjs/tailwindcss - was the key.