Back

Cannot follow Nuxt tutorial. Importing "@appwrite.io/pink" leads to error.

  • 0
  • Web
  • Cloud
deusMarte
25 Aug, 2024, 03:24

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:

TypeScript
<!-- 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:

TypeScript
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:
TypeScript
  "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!

TL;DR
Developers having trouble importing `@appwrite.io/pink` in a Nuxt tutorial due to a pre-transform error. The error may be related to incorrect package settings. Attempted fixes like importing in `nuxt.config.ts` CSS property didn't work. Some speculate it might be an issue with Nuxt version. Developer seeks guidance to resolve this issue to progress with the tutorial without resorting to using CDN for Pink style modules.
Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more