Error with module not found: slicemachine - librairies-state.json empty

Developing with Prismic
1

Hello everybody!

I started my first project with Prismic and Nuxt (v2)!
I followed the documentation (i'm at Fetch Data guide), but I have an issue when i start my project with npm run dev (localhost:3000).

ERROR in ./pages/slice-simulator.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/slice-simulator.vue?vue&type=script&lang=js&)

Module not found: Error: Can't resolve '~/slices' in '[...]\www\pages'
Module not found:  Error: Can't resolve '~~/.slicemachine/libraries-state.json'

On the Slice Machine (working fine), i created my first Custom Type (homepage), and on the editor, i created my first document, linked to this custom type (everything is live and sync).

I created the slice-simulator.vue in pages folder :slight_smile:

<template>
  <SliceSimulator v-slot="{ slices }" :state="state">
    <SliceZone :slices="slices" :components="components" />
  </SliceSimulator>
</template>

<script>
import { SliceSimulator } from '@prismicio/slice-simulator-vue'
import { components } from '~/slices'
import state from '~~/.slicemachine/libraries-state.json'

export default {
  components: {
    SliceSimulator
  },
  data () {
    return { state, components }
  }
}
</script>

Thanks a lot for your help!

2

I saw that i haven't the file .slicemachine/librairies-state.json.

In the crash-course-nuxt git, i see this file:

{
  "slices": {
    "components": {
      "features": {
        "library": "slices",
        "id": "features",
        "name": "Features",
        "description": "Features",
        "model": {
          "id": "features",
          "type": "SharedSlice",
          "name": "Features",
          "description": "Features",
          "variations": [

...

How do I generate it?
I created custom type and slices on the slicemachine, then push them on prismic.
On prismic, i created 2 documents, all published.

Thanks a lot!

4

Hello Vincent,

Welcome to the Prismic community, and thanks for reaching out to us.

What version of the Slice Machine do you have? With the latest version of Slice Machine 0.6.0, libraries-state.json is not used anymore.

Thanks,
Priyanka

5

Hi
Thanks Priyanka :wink:

This is version 0.6.1.
I created the file and now, it seems to be ok...
Curious...!

6

Hello Vincent,

Since version 0.6.0, the libraries-state.json is not generated anymore, so it shouldn’t be referenced anywhere. I noticed that the Nuxt.js tutorial still references it: Set up Prismic in a Nuxt Project - Documentation - Prismic; that’s why you encountered the issue. I have asked my documentation team to update this.

So there are two changes needed:

  1. This line should be removed:

import state from '~~/.slicemachine/libraries-state.json'

  1. This one return { state, components } replaced by return { state: {}, components }

So your slice-simulator.vue file should look like:


<template>
  <SliceSimulator v-slot="{ slices }" :state="state">
    <SliceZone :slices="slices" :components="components" />
  </SliceSimulator>
</template>

<script>
import { SliceSimulator } from '@prismicio/slice-simulator-vue'
import { components } from '~/slices'

export default {
  components: {
    SliceSimulator
  },
  data () {
    return { state : {}, components }
  }
}
</script>

Give this a try, and let me know if you need further assistance.

Thanks,
Priyanka

2 Likes
7

Thanks a lot!
It's working!