Troubleshooting: Slice Simulator


In case you run into installation issues, here are some tips.

../.slicemachine/libraries-state.json does not exist
You need to run npm run slicemachine at least once before launching npm run dev.

Some dependencies are missing
Installation failed, try re-installing.

We can’t connect to the Simulator page

  • Make sure your project is running with npm run dev.
  • Check the value is correct in your sm.json, (eg. http://localhost instead of localhost).
  • This could be caused by accessing the wrong port.
  • Check the slice-simulator.jsx route
  • The slice-simulator.js filename is arbitrary, it can be anything you want for example _test.js or _components.js, as long as you specify it as shown in the next step.

Can’t find “localSliceSimulatorURL”
Update the sm.json file
In the sm.json add the property in the shape of http://localhost:PORT/PATH.
PORT = port on which the next.js project is running. PATH = path to the file created above.

:warning: Some versions of Webpack fails to resolve ESM modules correctly, to mitigate that, update the import to use CJS instead:

import { SliceSimulator } from "@prismicio/slice-simulator-vue/dist/index.cjs";


I am trying to setup with Prismic 3 and Nuxt 3 version, and get this error:
We can’t connect to the simulator page

[Vue warn]: Unhandled error during execution of render function
  at <SliceSimulator state= { slices: { components: { image_push: [Object] } } } >
[nuxt] [request error] h is not a function
  at Proxy.render (./node_modules/@prismicio/slice-simulator-vue/dist/index.js:75:12)

and in slice machine client console I am getting this error:

Uncaught SyntaxError: 
The requested module '/_nuxt/node_modules/escape-html/index.js?v=c4e61d85' 
does not provide an export named 'default' 
(at http://localhost:3000/_nuxt/node_modules/@prismicio/helpers/dist/index.js?v=c4e61d85:4:8)