Slice Simulator not working after slice-machine-ui v1.0.3 upgrade

Developing with Prismic
1

We upgraded slice-machine-ui to v1.0.3 on our project, did all the steps to fix the braking changes and all is working fine except for the slice simulator, the code is the following:

slicemachine.config.json

{
  "apiEndpoint": "https://repository.prismic.io/api/v2",
  "repositoryName": "repoName",
  "adapter": "@slicemachine/adapter-next",
  "libraries": [
    "./slices"
  ],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator",
  "framework": "next"
}

slice-simulator.tsx

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

import { components } from '../../slices';

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

export default SliceSimulatorPage;

// Only include this page in development
export const getStaticProps = async () => {
  if (process.env.NODE_ENV === 'production') {
    return { notFound: true };
  }
  return { props: {} };
};

We verified the '../../slices' path, and it is correct.

When we try to go to the slice simulator, it only loads the UI to change the information, but not the component itself:

image
image1324×918 55.7 KB

Dependencies:
"@prismicio/client": "^6.7.1",
"@prismicio/helpers": "^2.3.5",
"@prismicio/next": "^0.1.5",
"@prismicio/react": "^2.5.0",
"@prismicio/slice-simulator-react": "^0.2.3",
"next": "^12.3.0",

DevDependencies:
"@prismicio/types": "^0.2.3",
"@slicemachine/adapter-next": "^0.1.3",
"prismic-ts-codegen": "^0.1.5",
"slice-machine-ui": "^1.0.3",

2

Hi @consumerproduct, this may not fix the problem, but could you update your SliceSimulator import to the following?

import { SliceSimulator } from '@slicemachine/adapter-next/simulator';

The <SliceSimulator> component from @slicemachine/adapter-next is the most up-to-date version.

3

Hi @angeloashmore thanks for the response, we tried your suggestion and we got the following errors:

first approach:

import { SliceZone } from '@prismicio/react';
import { SliceSimulator } from '@slicemachine/adapter-next';

import { components } from '../../slices';

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

export default SliceSimulatorPage;

// Only include this page in development
export const getStaticProps = async () => {
  if (process.env.NODE_ENV === 'production') {
    return { notFound: true };
  }
  return { props: {} };
};

And we got the following error message: "Module '"@slicemachine/adapter-next"' has no exported member 'SliceSimulator'. Did you mean to use 'import SliceSimulator from "@slicemachine/adapter-next"' instead?"

Then we tried:

import { SliceZone } from '@prismicio/react';
import SliceSimulator from '@slicemachine/adapter-next';

import { components } from '../../slices';

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

export default SliceSimulatorPage;

// Only include this page in development
export const getStaticProps = async () => {
  if (process.env.NODE_ENV === 'production') {
    return { notFound: true };
  }
  return { props: {} };
};

And we got another error: "JSX element type 'SliceSimulator' does not have any construct or call signatures."

In both ways the slice simulator looks like this:

image
image1893×922 137 KB

5

Ah, I'm sorry! I sent you the wrong module name. It should be this instead:

import { SliceSimulator } from '@slicemachine/adapter-next/simulator';

Note the extra /simulator at the end of the import. I edited my original message with the corrected import in case anyone else reads it later.

6

Thank you! That fixed the problem, now the slice simulator is working properly again.

1 Like