Check the render method of `DataCtxReader` error

carlos_guzman · December 23, 2024, 1:51pm

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets, and reproduction steps)

I’m trying to build and run my project, being able to load pages successfully. I started with my Codegen project, trying to compile it as usual with

$ npm install && npm run build && npm run start -- --port=<my_port_number>

which successfully loads the project, but then when I try to access one page, I get a minified react error. When debugging with the dev version (running $ npm run dev), I get the following error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DataCtxReader`.

It seems to be in the Plasmic components and I believe there was an update last week on Friday so I’m guessing it might be related since there were no changes to the project since last time it ran successfully.

What have you tried so far? (please link relevant docs and other forum posts)

Looked at PLASMIC: Encountered DataCtxReader error. and several results in Search results for 'DataCtxReader' - Plasmic Community , to not much avail.

I’ve tried looking through the page and its components to understand the inner workings a bit better in relationship to the error, though nothing seems out of the ordinary. I have ran $ npm run dev with previous versions of the code that I know worked, and am getting the same error.

Some context that might be related: I’m running the project locally in a private cloud only accessible via VPN and a limited access reverse proxy so the generic HTTP integration in plasmic doesn’t work since it seems like the integration needs to be reachable by Plasmic itself. So I wrote a custom component to make backend calls, making it generalized enough to provide the URL, endpoint, and a custom DataProviderName to wrap components in a div where they can access the results to the query. I’m interested in contributing the component in the future for others needing the same solution! But that’s a different topic.

alex_noel · December 23, 2024, 2:15pm

@carlos_guzman hi!

I would need a bit more details to help you out

DataCtxReader error is related to the DataProvider component and the context it provides. Can you try to delete components from the page one by one while having plasmic watch enabled? We can isolate the issue to some specific components or areas, and then think what to do next
Have you installed new components from the latest release? Or are you using the old components that were there previously?
Are you seeing this error in the studio as well, or only on the localhost?

carlos_guzman · December 23, 2024, 5:52pm

Hi @alex_noel ! Thanks for helping out!

I’ll answer backwards, for simplicity

Not seeing the error in Studio. Neither in the Studio view, nor in the “preview artboard” preview in the current window nor in the new window one.

I am seeing the warnings

hydration-error-info.js:63 Warning: React does not recognize the `setControlContextData` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `setcontrolcontextdata` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at button
    at sS (<anonymous>:125:15280)
    at <anonymous>:127:10641
    at eaJ (<anonymous>:659:27813)
    at span
    at n (<anonymous>:573:14547)
    at n (<anonymous>:573:18980)
    at div
    at span
    at <anonymous>:593:12625
    at eui (<anonymous>:730:31462)
    at V (https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:630418)
    at section
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at div
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at Suspense
    at v (<anonymous>:1:959)

, and

index.c00f5b5f.js:2 Warning: Each child in a list should have a unique "key" prop. It was passed a child from DataCtxReader. See https://reactjs.org/link/warning-keys for more information.
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:682868
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at div
    at CustomDataFetch_ (webpack-internal:///./components/CustomDataFetch.tsx:14:11)
    at V (https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:630418)
    at section
    at section
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at div
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at Suspense
    at v (<anonymous>:1:959)

, and

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of n which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at span
    at AntdIcon:60:1757

, and

hydration-error-info.js:63 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at <anonymous>:2:99742
    at <anonymous>:2:101099
    at <anonymous>:165:41750
    at <anonymous>:193:15986
    at <anonymous>:193:25121
    at <anonymous>:193:31868
    at Fu (<anonymous>:130:28873)
    at div
    at div
    at div
    at div
    at div
    at n (<anonymous>:103:29907)
    at <anonymous>:103:30086
    at <anonymous>:103:31616
    at FP (<anonymous>:130:35280)
    at FB (<anonymous>:130:40351)
    at n (<anonymous>:130:42268)
    at div
    at div
    at <anonymous>:64:8784
    at div
    at Tn (<anonymous>:130:56409)
    at To (<anonymous>:130:60103)
    at uL (<anonymous>:63:48271)
    at P5 (<anonymous>:130:22947)
    at Ta (<anonymous>:131:11227)
    at Tw (<anonymous>:131:12476)
    at div
    at Ru (<anonymous>:142:9599)
    at https://studio.plasmic.app/static/js/index.c00f5b5f.js:2:690511
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at div

^this one is in the div within my custom component

I did run npm install after new imports were needed on Friday. I am collaborating with a non technical teammate and I believe they may have used new components in the project. I usually have a multiplexer running plasmic watch to keep an eye out on the changes they made, and then I have a makeshift backup by pushing the updates to git. The components in the page I’m testing are the ones that were there previously.
Made a duplicate of my project, duplicated the page with my custom data fetching component, ran it with npm run dev, on a separate terminal ran npm watch -p <project_id> and started removing elements and refreshing my localhost page. It is an issue with the custom data fetching component since the error stopped showing up after I deleted that component.

The custom component is basically

import * as React from "react";
import { usePlasmicQueryData } from '@plasmicapp/react-web/lib/query';
import { DataProvider } from "@plasmicapp/react-web/lib/host";



function CustomDataFetch_({ 
    url, 
    endpoint,
    children,
    className,
    dataName
  }: {
      url?: string, 
      endpoint?: string,
      children: React.ReactNode,
      className?: string,
      dataName?:string
    }
  ) {
  const {data} = url ? usePlasmicQueryData(endpoint, async () => {
    const resp = await fetch(url + '' + endpoint);
    return await resp.json();
  }) : {};
	  return <div className={className}>
    <DataProvider name={dataName} data={data}>
      {children}
    </DataProvider></div>; }

const CustomDataFetch = React.forwardRef(CustomDataFetch_);
export default CustomDataFetch;

plasmic-host.tsx

import * as React from 'react';
import { PlasmicCanvasHost, registerComponent } from '@plasmicapp/react-web/lib/host';

import CustomDataFetch from '../components/CustomDataFetch';

// 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(...)


registerComponent(CustomDataFetch, {
  name: "CustomDataFetch",
  providesData: true,
  props: {
    // Pass in arbitrary content in the visual editing canvas
    children: 'slot',

    // Simple scalar props
    url: {
      type: 'string',
      displayName: "URL",
      defaultValue: "https://<my-backend-url>"
    },
    endpoint:  {
      type: 'string',
      displayName: "Endpoint",
      defaultValue: "/<my-endpoint>"
    },
    dataName:  {
      type: 'string',
      displayName: "Data name",
      defaultValue: "CustomDataFetch"
    }

  },

  // Specify how generated Plasmic code should import this component;
  // path is relative to srcDir
  importPath: './components/CustomDataFetch',
});

export default function PlasmicHost() {
  return <PlasmicCanvasHost />;
}

(some bits anonymized/redacted)

I’m using Next.js 14.2.20 - there were some issues with Plasmic with newer versions a month or two ago iirc. Let me know if you’d like more info! Or any tips on the custom component above, even if not fully related to this issue. Thanks!

alex_noel · December 23, 2024, 6:25pm

I noticed you are using export from react-web instead of @plasmicapp/loader-nextjs, for DataProvider component, is there a specific reason behind this?

A few suggestions to resolve your issue:

you can try to switch import to this one and see if that would help
import { DataProvider, useSelector } from '@plasmicapp/loader-nextjs';
You can also remove the React.forwardRef part, as it’s not required and might cause some troubles
use useMutablePlasmicQueryData if your data can change during the session, and if you want to do the query on the client-side. you can use response.mutate({}); within useEffect on url/query change to clear the cache within the hook

carlos_guzman · December 23, 2024, 7:17pm

Thank you!

My intention for codegen vs loader (which I believe is the Headless API) is because I wanted to have as few dependencies as possible, without relying on the Plasmic loader and having the source of truth in code via git. From Headless API vs. Codegen | Learn Plasmic , my understanding is that codegen was the better choice for that. Since I’m building apps around the compliance/security space, building with minimal external dependencies so that everything can be ran in a private environment is important. Let me know if loader-nextjs would actually be a better solution for this.
Sounds good - I believe this was copy paste leftover from docs.
Thank you! Will do. Do you have any link to docs on useMutablePlasmicQueryData? I can’t find it in the docs or forum.

With all those changes, I’m still experiencing the DataCtxReader error (both with loader-nextjs and the react-web imports)

alex_noel · December 30, 2024, 4:11pm

@jason can you suggest something for this case? I created the same code component from my end and it seems to be working fine

jason · December 31, 2024, 9:40pm

Sorry for the late response @carlos_guzman!

I think the DataCtxReader in the error might be a red herring. Try searching “plasmic element type is invalid” instead. Maybe you are missing an import path in one of your code components. Or maybe you are somehow importing multiple versions of a Plasmic package? Check your lock file to be sure.

carlos_guzman · January 12, 2025, 7:37pm

Thank you both! Other areas of the startup are gaining traction and my time after the holidays has been spent there and will continue to work on those higher priority needs.

If/When I come back to this later on, I’ll post any findings or updates and the actual resolution for any readers. Thanks again!

carlos_guzman · January 17, 2025, 6:25pm

I went back to this today and solved it!

Basically, it seems like the import that plasmic generates in components/plasmic/<projectName>/Plasmic<PageName>.tsx is

import { CustomDataFetch } from "../../AF107DataFetch";

which is the syntax used for named imports, whereas I was exporting the component as

function CustomDataFetch { ... }
export default CustomDataFetch;

The solution was to not export the component as default, so exporting it with

function CustomDataFetch { ... }
export CustomDataFetch;

in the component .tsx file.

Debugging steps I followed were:

Reading the original error carefully and noticing the you might have mixed up default and named imports part.
Running the server with npm run dev so that I can get more understandable errors
Clicking one of the links in the console traceback pointed to a line with the custom component.
Read up on named and default imports, and seeing how people were adding and removing curly braces to make code work for their own use cases. I learnt about how curly braces only work with named imports so I went on and looked at where my custom component was being imported and alas, it was being imported with curly braces in the plasmic component. So then I changed the export in my file since I’m not touching the plasmic folder, and voilà! It’s all good now

Best of luck to anyone reading this in the future! Hope you learn something new like I did.

carlos_guzman · January 17, 2025, 6:26pm

And thank you so much again @jason and @alex_noel . You are rockstars building an amazing product that is saving so much time in my life!

alex_noel · January 21, 2025, 11:01am

Thanks for posting your solution