Fix issue with duplicating components not replacing IDs on component itself

packages/builder/src/builderStore/componentUtils.js

@@ -182,16 +182,13 @@ export const makeComponentUnique = component => {
   // Replace component ID
   const oldId = component._id
   const newId = Helpers.uuid()
-  component._id = newId
+  let definition = JSON.stringify(component)
 
-  if (component._children?.length) {
-    let children = JSON.stringify(component._children)
+  // Replace all instances of this ID in HBS bindings
+  definition = definition.replace(new RegExp(oldId, "g"), newId)
 
-    // Replace all instances of this ID in child HBS bindings
-    children = children.replace(new RegExp(oldId, "g"), newId)
-
-    // Replace all instances of this ID in child JS bindings
-    const bindings = findHBSBlocks(children)
+  // Replace all instances of this ID in JS bindings
+  const bindings = findHBSBlocks(definition)
   bindings.forEach(binding => {
     // JSON.stringify will have escaped double quotes, so we need
     // to account for that
@@ -213,12 +210,14 @@ export const makeComponentUnique = component => {
       // A single string replace here is better than a regex as
       // the binding contains special characters, and we only need
       // to replace a single instance.
-        children = children.replace(binding, newBinding)
+      definition = definition.replace(binding, newBinding)
     }
   })
 
   // Recurse on all children
-    component._children = JSON.parse(children)
-    component._children.forEach(makeComponentUnique)
+  component = JSON.parse(definition)
+  return {
+    ...component,
+    _children: component._children?.map(makeComponentUnique),
   }
 }

packages/builder/src/builderStore/store/frontend.js

@@ -595,7 +595,7 @@ export const getFrontendStore = () => {
 
           // Make new component unique if copying
           if (!cut) {
-            makeComponentUnique(componentToPaste)
+            componentToPaste = makeComponentUnique(componentToPaste)
           }
           newComponentId = componentToPaste._id
 
@@ -905,7 +905,7 @@ export const getFrontendStore = () => {
           }
 
           // Replace block with ejected definition
-          makeComponentUnique(ejectedDefinition)
+          ejectedDefinition = makeComponentUnique(ejectedDefinition)
           const index = parent._children.findIndex(x => x._id === componentId)
           parent._children[index] = ejectedDefinition
           nextSelectedComponentId = ejectedDefinition._id

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte

@@ -38,7 +38,7 @@
     let duplicateScreen = Helpers.cloneDeep(screen)
     delete duplicateScreen._id
     delete duplicateScreen._rev
-    makeComponentUnique(duplicateScreen.props)
+    duplicateScreen.props = makeComponentUnique(duplicateScreen.props)
 
     // Attach the new name and URL
     duplicateScreen.routing.route = sanitizeUrl(screenUrl)