Next.js - Module not found: Can't resolve '../.slicemachine/libraries-state.json'

Developing with Prismic
1

I'm receiving the error:
Module not found: Can't resolve '../.slicemachine/libraries-state.json'
when attempting to preview a slice in in the SliceSimulator with Nextjs. It's a brand new project and all dependencies are up-to-date. Running Node 18.

If I comment out the import and and the state prop, I can at least deploy the site without any errors.

My slice-simulator.js page:

import { SliceSimulator } from '@prismicio/slice-simulator-react' 
import { SliceZone } from '@prismicio/react'

import { components } from '../slices'
import state from '../.slicemachine/libraries-state.json'

const SliceSimulatorPage = () => {
  return (
    <SliceSimulator
      sliceZone={({ slices }) => (
        <SliceZone slices={slices} components={components} />
      )}
      state={state}
    />
  )
}

export default SliceSimulatorPage
2 Likes
2

@jgunderson Thank you for posting this. I tried to spin up a new Next+Prismic project, and followed the Prismic Docs for this. I received the same error when trying to preview a slice.

In v0.6 of slicemachine, I'm noticing that some things are off.

  1. Docs state that npx @slicemachine/init was supposed to install @prismicio/next as well, but this did not happen for me
  2. The .slicemachine/libraries-state.json file is not created

When I downgraded to 0.5.2, this file was created. I re-upgraded to .6. However, the changes I made to the slice are not reflected in the libraries-state.json file. The changes are saved within the slice's model.json file, though. This makes me wonder if something in the script that is supposed to copy the data from the model.json file to the libraries-state file isn't happening.

Found this...looks like the new .6 is supposed to not use this file, but instead something else I suppose:
https://github.com/prismicio/slice-machine/pull/763

3

So @jgunderson based on the link I provided above, I was able to determine that a "fix" for now is to just create a libraries-state.json file in the exact location as specified in the import. Inside that file just place an empty object like this

// .slicemachine/libraries-state.json
{}

This should allow you to use the slicemachine as intended.

1 Like
4

Thank you @nf_mastroianni. I can confirm that your temporary fix worked for me. I was also able to view slices in the Slice Simulator after adding this file.

5

Thanks @nf_mastroianni for the quick solution, and to @jgunderson for confirming it worked.

Have you two noticed any downstream issues from this approach? I just discovered this thread after my Slicemachine state breaking a week ago. Your solution has been the only working resolution I've found :slight_smile:

1 Like
6

We've been developing on this version and haven't run into any issues as of yet.

1 Like
7

If you updated your packages in an existing project, you wouldn't see any issues (as the libraries-state file will already be there). However, if you spin up a new Next+Prismic project following Prismic Docs, you will run into the libraries-state.json file issue.

8

I have not detected any issues in "fixing" it this way. I'm glad you found this solution to be helpful.

11

Hello team, we can confirm the latest version of Slice Simulator can now run without a libraries-state.json file.

this import should be removed, because the libraries state is not generated anymore by the slicemachine.
import state from '../.slicemachine/libraries-state.json'

And chance its reference in the slice-simulator.js file from:

state={state}

to:

state={{}}
1 Like
12

When I follow @Pau instructions, the slice simulator shows an empty white box. This renders the slice simulator to be useless. This solution does not work for me.

Additionally, I'm noting that when I save my click Save Mock Content, these values are not saved anywhere and are wiped out each time the page is manually refreshed or closed.

"next": "13.1.1",
"react": "18.2.0",
"slice-machine-ui": "^0.6.0",

Some console errors when using the prosed deletion of the libraries-state.json file and state reference

Error: State does not validate expected format, see console logs for detailed report
    at StateManager.load (index.js?60b4:276:1)
    at async StateManager.reload (index.js?60b4:295:1)
13

Hey @nf_mastroianni, please try and re-add the state reference in the slice-simulator file with an empty obj. Like so:

const SliceSimulatorPage = () => (
  <SliceSimulator
    sliceZone={(props) => <SliceZone {...props} components={components} />}
    state={{}}
  />
)

This should make the slice simulator work.

1 Like
14

Confirmed...this did the trick. It does not seem to have resolved the saving of mock data though. Thank you.