Using codegen, one specific component is automatically changing its import path every time I make changes in plasmic studio, breaking everything until I fix and repeat.
Where do I start to debug?
Is this an autogenerated file by Plasmic? If so, it will be overwritten every time you sync your project. So it’s better to not make any changes to autogenerated files.
As for the wrong import path, can you confirm if this Globe is a custom code component? If so, can you share a screenshot of the code component meta that specifiea the code component displayName, props, and importPath? The importPath specified there may be incorrect, which may be leading to an incorrect path in the autogenerated file.
This is the code component (Globe.tsx):
import React, { useCallback, useEffect, useRef } from 'react';
import createGlobe, { COBEOptions } from "cobe";
import { useSpring } from "react-spring";
import { registerComponent } from '@plasmicapp/react-web/lib/host';
interface GlobeProps {
className?: string;
width: number;
height: number;
devicePixelRatio: number;
phi: number;
theta: number;
dark: number;
opacity: number;
diffuse: number;
mapSamples: number;
mapBrightness: number;
baseColor: string; // RGB as a comma-separated string "r,g,b"
markerColor: string;
glowColor: string;
markers: any[]; // Define more specifically based on actual marker requirements
offset: any[];
onRender?: (state: any) => void; // Define more specifically if possible
canvasStyle?: React.CSSProperties;
containerStyle?: React.CSSProperties;
}
export const Globe: React.FC<GlobeProps> = ({
className,
width = 500,
height = 500,
devicePixelRatio = 2,
phi = 0,
theta = 0,
dark = 1,
opacity = 1,
diffuse = 2,
mapSamples = 16000,
mapBrightness = 1,
baseColor = "1.2,1.7,2.5",
markerColor = "1.2,1.7,2.5",
glowColor = "0.2,0.2,0.3",
markers = [],
offset = [0, 0],
onRender,
canvasStyle,
containerStyle
}) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const pointerInteracting = useRef<number | null>(null);
const pointerInteractionMovement = useRef<number>(0);
const [{ r }, api] = useSpring(() => ({
r: 0,
config: {
mass: 1,
tension: 280,
friction: 40,
precision: 0.001,
},
}));
useEffect(() => {
let phiIncrement = phi;
const cobeConfig: COBEOptions = {
devicePixelRatio,
width: width * 2,
height: height * 2,
phi: phiIncrement,
theta,
dark,
opacity,
diffuse,
mapSamples,
mapBrightness,
baseColor: baseColor.split(',').map(Number),
markerColor: markerColor.split(',').map(Number),
glowColor: glowColor.split(',').map(Number),
markers,
offset
};
const onResize = () => {
if (canvasRef.current) {
const currentWidth = canvasRef.current.offsetWidth * 2;
cobeConfig.width = currentWidth;
cobeConfig.height = currentWidth;
}
};
window.addEventListener('resize', onResize);
onResize();
const globe = createGlobe(canvasRef.current, {
...cobeConfig,
onRender: (state) => {
if (!pointerInteracting.current && onRender) {
onRender(state);
} else {
if (!pointerInteracting.current) {
phiIncrement += 0.005;
}
state.phi = phiIncrement + r.get();
state.width = cobeConfig.width;
state.height = cobeConfig.height;
}
}
});
setTimeout(() => {
canvasRef.current.style.opacity = '1';
});
return () => {
globe.destroy();
window.removeEventListener('resize', onResize);
};
}, [width, height, devicePixelRatio, phi, theta, dark, opacity, diffuse, mapSamples, mapBrightness, baseColor, markerColor, offset, glowColor, markers, onRender]);
return (
<div style={{ width: '100%', maxWidth: width, aspectRatio: 1, margin: 'auto', position: 'relative', ...containerStyle }} className={className}>
<canvas ref={canvasRef}
onPointerDown={(e) => {
pointerInteracting.current = e.clientX - pointerInteractionMovement.current;
canvasRef.current.style.cursor = 'grabbing';
}}
onPointerUp={() => {
pointerInteracting.current = null;
canvasRef.current.style.cursor = 'grab';
}}
onPointerOut={() => {
pointerInteracting.current = null;
canvasRef.current.style.cursor = 'grab';
}}
onMouseMove={(e) => {
if (pointerInteracting.current !== null) {
const delta = e.clientX - pointerInteracting.current;
pointerInteractionMovement.current = delta;
api.start({ r: delta / 200 });
}
}}
onTouchMove={(e) => {
if (pointerInteracting.current !== null && e.touches[0]) {
const delta = e.touches[0].clientX - pointerInteracting.current;
pointerInteractionMovement.current = delta;
api.start({ r: delta / 100 });
}
}}
style={{ width: '100%', height: '100%', cursor: 'grab', contain: 'layout paint size', opacity: 0, transition: 'opacity 1s ease', ...canvasStyle }}
/>
</div>
);
}
this is in my plasmic host:
import { Globe } from '../components/Globe';
registerComponent(Globe, {
name: 'Globe',
props: {
className: "string",
width: "number",
height: "number",
devicePixelRatio: "number",
phi: {
type: 'number',
control: 'slider',
min: 0,
max: 2,
},
theta: {
type: 'number',
control: 'slider',
min: 0,
max: 2,
},
dark: "number",
opacity: {
type: 'number',
control: 'slider',
min: 0,
max: 1,
},
diffuse: "number",
mapSamples: {
type: 'number',
control: 'slider',
min: 0,
max: 99999,
},
mapBrightness: "number",
baseColor: "string", // Assuming you will convert this prop to an array [r, g, b] format in your component
markerColor: "string", // Assuming same as baseColor
glowColor: "string", // Assuming same as baseColor
markers: "object", // This should be detailed according to how you handle marker objects
offset: "object",
},
importPath: '../components/globe',
isDefaultExport: false,
});
The initial error is an automatic code component generated by plasmic when I create a component in studio.
You would have to tweak your importPath to fix this.
The importPath helps Plasmic find where the Globe component is situated. This is used together with importName that tells which named export to be used from the file path specified in importPath.
Can you tell what the correct path of Globe should be in PlasmicBentoBox.tsx (i.e. the path you use to fix the error manually)?
The following works:
import { Globe } from “@/components/Globe”; // plasmic-import: 8_yfzIJViXNt/codeComponent
But obviously it keeps updating to …/…/…/…/components/Globe
I’m getting this on other components too. This is a really serious issue I need to resolve ASAP, are you able to help me debug this?
Just tried a fresh install, started from scratch and added a component, same issue. Every time, it reverts to that odd import path: …/…/…/…/components…
What’s going wrong?
It depends on your project structure. As I said, you need to specify the correct importPath here, with the correct importName. The path needs to be relative to the root directory where the plasmic.json is present. So, if your project structure is like below:
plasmic.json
– components
— Globe.tsx
You should use importPath: "./components/Globe.tsx"
Alternatively, please share a screenshot of your project structure for better assistance.
Resolved…
I think the issue seems to have been using plasmic watch instead of npx plasmic watch 
As I said, you should not modify autogenerated files. They will be overwritten, and your changes reverted.
Of course, was just doing this for the purpose of debugging
@sarah_ahmed I have to mark this as unresolved again.
Upon running plasmic sync, I’ve got the same issue again. It happens with any custom components registered in my plasmic-host file.
I’ve tried various import paths according to “path is relative to srcDir”:
importPath: ‘./components/custom/Globe’,
importPath: ‘…/components/custom/Globe’,
importPath: ‘/components/custom/Globe’,
importPath: ‘./components/custom/Globe.tsx’,
But I get the same.
Now, I’ve changed my paths in the plasmic-host file but I still get the original path showing in the automatically generated plasmic file. Why is it not updating with my new path?
./components/plasmic/maerifa_solutions/PlasmicBentoBox.tsx:62:1
Module not found: Can't resolve '../../../../components/custom/globe'
60 | } from "@plasmicapp/react-web/lib/host";
61 |
> 62 | import { Globe } from "../../../../components/custom/globe"; // plasmic-import: q5u4K7ge29dT/codeComponent
| ^
63 |
64 | import "@plasmicapp/react-web/lib/plasmic.css";
65 |
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./components/BentoBox.tsx
./components/plasmic/maerifa_solutions/PlasmicHomepage.tsx
./pages/backup.tsx
Can you share your plasmic-host file?
Also, the generated code seems to try to import with a lowercase globe
62 | import { Globe } from “…/…/…/…/components/custom/globe”;
Did you have a typo in the plasmic-host where the import path should be a uppercase Globe?
@jason This entire path is outdated.
The file is now a capital G and no /custom/, like so:
import * as React from 'react';
import { PlasmicCanvasHost, registerComponent, registerGlobalContext } from '@plasmicapp/react-web/lib/host';
// You can register any code components that you want to use here; see
// https://docs.plasmic.app/learn/code-components-ref/
// And configure your Plasmic project to use the host url pointing at
// the /plasmic-host page of your nextjs app (for example,
// http://localhost:3000/plasmic-host). See
// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
// registerComponent(...)
import ScrollProvider from "../components/ScrollContext";
registerGlobalContext(ScrollProvider, {
isDefaultExport: false,
name: "ScrollProvider",
providesData: true,
props: {},
importPath: './components/ScrollContext',
});
import Globe from '../components/Globe';
registerComponent(Globe, {
name: 'Globe',
props: {
className: "string",
width: "number",
height: "number",
devicePixelRatio: "number",
phi: {
type: 'number',
control: 'slider',
min: 0,
max: 2,
},
theta: {
type: 'number',
control: 'slider',
min: 0,
max: 2,
},
dark: "number",
opacity: {
type: 'number',
control: 'slider',
min: 0,
max: 1,
},
diffuse: "number",
mapSamples: {
type: 'number',
control: 'slider',
min: 0,
max: 99999,
},
mapBrightness: "number",
baseColor: "string", // Assuming you will convert this prop to an array [r, g, b] format in your component
markerColor: "string", // Assuming same as baseColor
glowColor: "string", // Assuming same as baseColor
markers: "object", // This should be detailed according to how you handle marker objects
offset: "object",
},
importPath: './components/Globe',
isDefaultExport: true,
});
export default function PlasmicHost() {
return <PlasmicCanvasHost />;
}
I tried deleting everything in components/plasmic and regenerating with plasmic sync. The files just regenerate with the same outdated paths.
I see the outdated path is also in plasmic.json
Where is the outdated path stored and where is it coming from?
Ah yes, the path might have been saved in plasmic.json. Can you try deleting plasmic.json, and it should be regenerated for you. You can also manually edit plasmic.json by hand.