Migrating slices to new slice builder but supporting legacy slices

Developing with Prismic
, ,
1

I am using NextJS to update an old NuxtJS site that is pre-slice machine.

It uses the legacy slice builder. I have used the slice machine legacy upgrade tool to upgrade the slices, however, I am unable to figure out how to still support legacy slices that are on existing documents. How can I do this? This is what I see:

Placeholder component for RichTextArea (variation: default) Slices
Could not find a component for Slice type “image_splash”
Could not find a component for Slice type “image_splash”
Could not find a component for Slice type “image_splash”
Could not find a component for Slice type “image_splash”
Could not find a component for Slice type “image_splash”
Could not find a component for Slice type “testimonial”
Could not find a component for Slice type “card_block”

RichTextArea is the new slice generated from a legacy slice called RichTextArea, the upgrade tool and I've edited the document and added it.

I found this post: Migrating Legacy Slices to Slice Machine - Question on Legacy Slice Names

I tried to unpublished/archive a document in the document view, and then republish it via the list view but unfortunately the document still cannot find the legacy slices.

Screenshot 2024-09-01 at 02.04.17
Screenshot 2024-09-01 at 02.04.172194×322 29.4 KB

Screenshot 2024-09-01 at 02.05.02
Screenshot 2024-09-01 at 02.05.022576×456 37.9 KB

{
  "repositoryName": "",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator",
  "framework": "next",
  "labs": {
    "legacySliceUpgrader": true
  }
}

  "dependencies": {
    "@plaiceholder/next": "^3.0.0",
    "@prismicio/client": "^7.8.1",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "clsx": "^2.1.1",
    "next": "14.2.7",
    "plaiceholder": "^3.0.0",
    "react": "^18",
    "react-dom": "^18",
    "react-player": "^2.16.0",
    "react-transition-group": "^4.4.5",
    "sass": "^1.75.0",
    "scss": "^0.2.4",
    "sharp": "^0.33.4"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.47",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/react-transition-group": "^4.4.11",
    "eslint": "^8",
    "eslint-config-next": "14.2.7",
    "postcss": "^8",
    "slice-machine-ui": "^2.6.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }

Thanks!

2

Hey @jjames.home, hope you're doing well!

It's my understanding that you upgraded multiple slices through Slice Machine.

Can you share the following details with us so we can better understand your issue:

  • ideally, a list of the slices you upgraded, and from what name to what name
  • the content of your ~/src/slices/index.ts file
  • your repository name

Thanks! :pray:

3

Hi @lihbr

Thanks for responding.

Yes, that's correct. It just shows it multiple times because the excerpt is from a page/document where there are multiple slices of the same type.

I have sent you the repo name over DM.

~/src/slices/index.ts

`// Code generated by Slice Machine. DO NOT EDIT.

import dynamic from "next/dynamic";

export const components = {
  Accordion: dynamic(() => import("./Accordion")),
  FeatureBlock: dynamic(() => import("./FeatureBlock")),
  ImageBlock: dynamic(() => import("./ImageBlock")),
  ImageSplash: dynamic(() => import("./ImageSplash")),
  RichTextArea: dynamic(() => import("./RichTextArea")),
  Statistics: dynamic(() => import("./Statistics")),
  Testimonial: dynamic(() => import("./Testimonial")),
  TextSplash: dynamic(() => import("./TextSplash")),
};

These are the slices I upgraded:

  • Accordion
  • FeatureBlock
  • ImageBlock
  • ImageSplash
  • RichTextArea
  • Statistics
  • Testimonial
  • TextSplash

As for what I named them as I just used the upgrade tool and selected "upgrade slice", (the simple selection I hadn't actually upgraded yet so it is just an example).

Screenshot 2024-09-02 at 14.22.25
Screenshot 2024-09-02 at 14.22.25952×982 45.9 KB

Probably something silly I've missed. I appreciate the help! I think the issue is that I am trying to use legacy slices in parallel to the upgraded slices.

4

Re,

So, I had a look at your repository and its slice models. It looks like you upgraded some slices from the bording-school-placement custom type and a few others from about-bright-world, boarding-school-guardianship, and boarding-school-center, which seems alright.

It seems that you added some of the upgraded slices to other custom types instead of merging their legacy slices with an existing, keeping the legacy slices alive along its upgraded slice, which should also be fine.

You're then in a case where you have legacy slices living alongside slice machine slices in some custom types, which is also fine as you can then later upgrade those legacy slice to slice machine slices, or merge them against existing slices.

The components map Slice Machine creates only takes into account your slice machine slices. Which means you need to create the other half of the map to map your legacy slices to components.

For example, you could create a components.ts file alongside the managed index.ts file in ~/src/slices with something like that:

import dynamic from "next/dynamic";

import { components as managedComponents } from "./index";

export const components = {
  ...managedComponents,
                              // or another component
  image_splash: dynamic(() => import("./ImageSplash")),
  // ... same for all your legacy slices, but you probably
  // already have that map somewhere in your code(?)
};

Then you can import { components } from "~/src/slices/components"; and use it for the components prop of your <SliceZone />

Let me know about it!

5

It appears to have worked perfectly, so straightforward!

Thanks for your work!

1 Like