Web Developer
Hi,
I was hoping to learn the basics of Appwrite with its "Build an ideas tracker with Nuxt" tutorial (https://appwrite.io/docs/tutorials/nuxt/step-1)
However, in step 2, importing @appwrite.io/pink in App.vue raises an error when I run npm run dev.
That is, this code:
<!-- app.vue -->
<script setup>
import "@appwrite.io/pink";
// optionally, add icons
import "@appwrite.io/pink-icons";
</script>
Produces this error:
ERROR Pre-transform error: Failed to resolve entry for package "@appwrite.io/pink". The package may have incorrect main/module/exports specified in its package.json: Missing "." specifier in "@appwrite.io/pink" package
Searching the web for answers, I came across this support thread: https://appwrite.io/threads/1089527424523440148
I've tried importing those style modules in the css property of nuxt.config.ts, as suggested:
export default {
// ....
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['@appwrite.io/pink'],
// ...
}
But, the same error still appears.
In the thread, the error is attributed to some issue with Nuxt 2.15.8, but I'm using Nuxt 3.13 and still getting it (not sure if it's the exact same error, though, since the thread didn't include the error message).
I could use the Pink style modules from the CDN, but am worried of going deeper into Appwrite if I run into an error like this just by following the tutorial in Appwrite's own docs.
Does anyone know if there's anything I can do to fix the error? Do you also run into it just by following the instructions in the Nuxt with Appwrite tutorial? (I followed it step by step, from scratch. I didn't have any pre-existing project nor setup)
Additional Context:
- OS: macOS Sonoma 14.4.1
- Node Version: v20.17.0
- package.json Dependencies:
"dependencies": {
"@appwrite.io/pink": "^1.0.0-next.10",
"appwrite": "^14.0.1",
"nuxt": "^3.13.0",
"vue": "latest"
}
Any help is appreciated. Thank you for your time!