SliceZone Nuxt 3 error with type imports in slices

Developing with Prismic
,
1

Hello! I'm developing a website using Nuxt 3 and I keep getting this error on my console every time I render a page with the SliceZone component:

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/node_modules/.cache/vite/client/deps/@prismicio_client.js?v=8a196fb6' does not provide an export named 'Content'

I think it refers to the line that's automatically added at the top of each slice setup script:

<script setup lang="ts">
import { type Content } from '@prismicio/client'
/* ... slice props */
</script>

Any ideas on how to fix this? This happens on every website I'm working on currently. I don't know if it's related to the fact that I don't use typescript in the rest of my .vue files (layouts, pages, components, composables).

I hope I don't have to go through every slice's index.vue file and remove the typescript statements, as I have already created a lot of slices. :frowning:

The relevant packages' versions in my package.json look like:

"devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/eslint-config": "^0.2.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/prismic": "^3.1.0",
    "@slicemachine/adapter-nuxt": "^0.3.28",
    "eslint": "^8.53.0",
    "nuxt": "^3.8.2",
    "slice-machine-ui": "^1.21.2",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
}

Edit / Update: If I remove the typescript portion to a slice's index.vue file's setup script and leave it like so:

<script setup>
defineProps(getSliceComponentProps(['slice', 'index', 'slices', 'context']))
</script>

It does get rid of the error, if that helps further clear up the issue.

3

Hey Daniela,

If I recall correctly, Slice Machine will automatically detect if your project is using TypeScript and then generate files accordingly. It would appear that Slice Machine is generating TypeScript files for you. Is it possible you have a tsconfig file in your project, or something else that would make Slice Machine think that you're using TypeScript? If so, try removing that and then generating a new Slice.

Sam

1 Like
5

Thank you very much! I removed the tsconfig and it switches my /slices/index.ts to a /slices.index.js file and every new slice's setup script doesn't have the typescript snippet anymore. :) This solution works for me at the moment.

Cheers,
Dani

1 Like