Use SliceSimulator with multiple target libraries

Developing with Prismic
,
#1

Hi folks!
Had a question I was hoping someone would know the answer to. I am trying to use separate target libraries in order to keep my slices organized. Not all slices will be used on every page so I am scoping certain slices into folders by page. The issue I am running into is that the Slice Simulator cannot find any slices outside the "slices" directory by default. If I change the code to point towards my "HomeSlices" directory like this:

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

import state from "../.slicemachine/libraries-state.json";
import { components } from "../HomeSlices";

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

export default SliceSimulatorPage;

then the simulator will be unable to preview any slices in the default "Slices" directory. Could be that I am missing something fairly obvious here but I cannot find a ton of documentation on how to use the different target libraries other than initial setup so figured i'd just ask.

#3

Hello @jc.lunardini

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

Have you added target libraries to the sm.json file as described here?

Thanks,
Priyanka

#4

Hi Priyanka,

I have indeed added the library to sm.json, and can select it when creating a new slice but can only simulate one library at a time

#6

Hello @jc.lunardini

To use slicesimulator with multiple target libraries, you must import all the libraries as components in the slice-simulator.jsx file given in that example: slice-machine/slice-simulator.jsx at 77d343ce6eb5d3e995a2a1e2dc1e1fb1ce1851b6 · prismicio/slice-machine · GitHub

Let me know if you have any further assistance.

Thanks,
Priyanka

#7

Thank you so much! I hadn't seen that example and now that I have, my issue is resolved.

#8

Great @jc.lunardini. I am glad to help you. Feel free to reach out to us whenever you have any issues.