"Unhandled Runtime Error: Element type is invalid" when exporting Plasmic project to GitHub

marc_bonenberger · June 13, 2023, 3:23pm

Hey Plasmic community,

We’ve encountered an issue with our Plasmic project and could use some help from the community.

After making changes to our homepage using Plasmic, we exported the project to GitHub. However, when trying to load the site, we encountered the following error:

Unhandled Runtime Error 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 PlasmicFaqGeneral.

We have been unable to pinpoint the exact cause of the issue but suspect it arises during the export process. The error occurred after duplicating a page of our website and modifying the content of the duplicated page.

We would greatly appreciate any insights or solutions the community can provide to help us resolve this issue. Has anyone encountered a similar problem before?

Thank you in advance for your assistance!

Best regards,
Marc

jack_vo · June 14, 2023, 11:06am

Hey Marc,
I definitely encountered this issue before, I could not remember exactly but the most possible issue was that you were passing undefined as prop to a Plasmic component which expect a proper React component. If you are using slot, it could be the children slot is being undefined

Are you using codegen? If yes, you should be able to see this issue while loading your app in the browser.

marc_bonenberger · June 14, 2023, 4:58pm

Hi Jack,

Thank you for your response and helpful suggestion. We’re currently investigating the possibility of passing undefined as a prop to a Plasmic component.

Regarding your question about codegen, yes, we are using it. However, the error output we receive doesn’t provide any specific hints that we can use for debugging purposes. It would be great if there’s a way to get more detailed information to pinpoint the source of the problem.

We’ll continue to explore the potential issue you mentioned and see if we can find a resolution. If you have any additional insights or suggestions, please feel free to share them with me.

Thanks again for your assistance!

Best regards,
Marc

jack_vo · June 16, 2023, 12:55am

Hi Marc,
It’s good that you can see the error in your browser as it will make debugging a lot easier.

I have outlined 2 ways to detect the errors below which you can try:

Using Plasmic studio

Basically set visibility of each Custom component to Not Render then reload the page, if you do it right, you should not see that error anymore
Unset the Not Render visibility of one component then reload the page, check if you see the error
You will need to repeat the step above for each component until you spot the error.

Debug in the browser using browser’s Stacktrace

Open Devtool
Let the error happen
Click on the error line Unhandled Runtime Error: Element type is invalid so it will take you into the React’s node_module that throw you that error
Put the debug breakpoint at that line
Do not close the Devtool, reload the browser
The error will happen again but will stop at your debug breakpoint
In the Devtool > Source > check the stack trace Callstack and click in each stacktrace to travel back and find out where the React component that is throwing error is initialized, you should be able to find out the component name.
Our main purpose is to find out the parent React component that is rendering the undefined props

Hope it helps

marc_bonenberger · June 16, 2023, 2:43pm

Hi Jack,

Thank you so much for these hints again!

Debugging with Devtool and StrackTrace did not provide any useful hint, unfortunately, as the page breaks at a file called contentScript.js at the following function:

function on(e) {
            if (!(e instanceof Uint8Array))
                throw new TypeError("b must be a Uint8Array")
        }

Following down the stracktrace levels does not provide any hint to a custom React component that causes the error (see image).

I also followed your first recommendation to debug using Plasmic Studio and disabled visibility for all major custom components. Though I left buttons and other minor components visible, as these go probably in the hundreds.

The page still breaks with the same error as I initially posted.

I also tried using an older backup that does not contain recent changes and this also breaks with the same error after exporting.

I really don’t understand what’s causing this. Is it possible that a recent upgrade of Plasmic Studio causes an incompatibility in our website?

marc_bonenberger · June 16, 2023, 3:19pm

These are parts of the error logs if it’s of any help.

Warning: React.createElement: 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.
    at func (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicNavBar.tsx:505:85)
    at NavBar_
    at div
    at div
    at div
    at func (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicHomepage.tsx:3248:85)
    at DataProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:357:20)
    at DataProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:357:20)
    at PageParamsProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:376:24)
    at EmbedCss (/Users/marc/test/node_modules/@plasmicpkgs/plasmic-embed-css/dist/plasmic-embed-css.cjs.development.js:11:18)
    at GlobalContextsProvider (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicGlobalContextsProvider.tsx:18:13)
    at Homepage (webpack-internal:///./pages/index.tsx:52:83)
    at $29383e587d62412a$export$9f8ac96af4b1b2ae (/Users/marc/test/node_modules/@react-aria/ssr/dist/main.js:48:43)
    at PlasmicRootProvider (/Users/marc/test/node_modules/@plasmicapp/react-web/dist/react-web.cjs.development.js:2258:24)
    at MyApp (webpack-internal:///./pages/_app.js:32:18)
    at StyleRegistry (/Users/marc/test/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/marc/test/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
    at AppContainer (/Users/marc/test/node_modules/next/dist/server/render.js:290:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/marc/test/node_modules/next/dist/server/render.js:326:57)
    at div
    at Body (/Users/marc/test/node_modules/next/dist/server/render.js:613:21)
Warning: React.createElement: 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.
    at func (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicNavBar.tsx:505:85)
    at NavBar_
    at div
    at div
    at div
    at func (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicHomepage.tsx:3248:85)
    at DataProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:357:20)
    at DataProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:357:20)
    at PageParamsProvider (/Users/marc/test/node_modules/@plasmicapp/host/dist/host.cjs.development.js:376:24)
    at EmbedCss (/Users/marc/test/node_modules/@plasmicpkgs/plasmic-embed-css/dist/plasmic-embed-css.cjs.development.js:11:18)
    at GlobalContextsProvider (webpack-internal:///./components/plasmic/copy_of_blockshard_final/PlasmicGlobalContextsProvider.tsx:18:13)
    at Homepage (webpack-internal:///./pages/index.tsx:52:83)
    at $29383e587d62412a$export$9f8ac96af4b1b2ae (/Users/marc/test/node_modules/@react-aria/ssr/dist/main.js:48:43)
    at PlasmicRootProvider (/Users/marc/test/node_modules/@plasmicapp/react-web/dist/react-web.cjs.development.js:2258:24)
    at MyApp (webpack-internal:///./pages/_app.js:32:18)
    at StyleRegistry (/Users/marc/test/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/marc/test/node_modules/next/dist/shared/lib/router/adapters.js:60:11)
    at AppContainer (/Users/marc/test/node_modules/next/dist/server/render.js:290:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/marc/test/node_modules/next/dist/server/render.js:326:57)
    at div
    at Body (/Users/marc/test/node_modules/next/dist/server/render.js:613:21)

yang · June 18, 2023, 8:48pm

Hi @marc_bonenberger, are you using codegen?

This error is usually due to missing or incorrect import paths specified to the registerComponent() call. Do you have a custom registered code component being used inside your FaqGeneral or NavBar component? If you look at the generated code, what is the component being instantiated on that line PlasmicNavBar.tsx:505? That should lead you to the culprit.

marc_bonenberger · June 19, 2023, 9:24am

Hi @yang, many thanks for your response.

Yes, we are using codegen.

Do you have a custom registered code component being used inside your FaqGeneral or NavBar component?

The issue is that the website was build by an external web designer who has left his previous company shortly after he completed the job, leaving us without guidance or support. So I’m not sure actually, but it’s quite possible. Though I find it curious that even a re-export of a previously perfectly working version also results in this error.

If you look at the generated code, what is the component being instantiated on that line PlasmicNavBar.tsx:505? That should lead you to the culprit.

I’ve attached a screenshot of the code snippet at PlasmicNavBar.tsx:505. I don’t see anything useful at this line. But the images folder in src does not exist at this location. I’ve checked the working main branch, which is at the state before the recent export that led to the current issues, and the folder is absent there as well.

EDIT: I’ve seen that all images are in the /public folder. So src seems to be correctly pointing to this folder.

yang · June 20, 2023, 2:22am

Can you take your project and try it in a brand new create-plasmic-app? Start with selecting loader, next js, typescript and verify that that works. Then try codegen. There may be some component substitution happening in the original code base, this should help you narrow down where the problem is coming from, and it will give you something that works to compare against.

marc_bonenberger · June 20, 2023, 8:01am

Not sure if I understood. You mean I should create a new project in Plasmic, then start selecting the features you mentioned, without using anything from our own project? Then try to compare if there are any differences?

I’ve also noticed that during a recent update of Plasmic Studio, antd4 was replaced by antd5. While I see that antd5 was included in the dependencies of package.json, @plasmicpkgs/antd5 was not. Though installing it did not solve the issue. Are there probably also other dependencies that need to be included/updated other than antd5? This would explain why the project is no longer working, even though it did perfectly well before the recent Plasmic Studio update.

Is it possible to revert to a previous Plasmic Studio version so that we at least can get back to a working website until we fixed these issues?

I’ve pasted the package.json below in case this is useful:

{
  "name": "tmp-cpa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.1",
    "@plasmicapp/cli": "^0.1.292",
    "@plasmicapp/host": "^1.0.107",
    "@plasmicapp/react-web": "^0.2.229",
    "@plasmicpkgs/antd": "^2.0.47",
    "@plasmicpkgs/lottie-react": "^0.0.78",
    "@plasmicpkgs/plasmic-basic-components": "^0.0.100",
    "@plasmicpkgs/plasmic-embed-css": "^0.1.77",
    "@plasmicpkgs/plasmic-query": "^0.0.107",
    "@types/node": "18.11.18",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "antd": "^5.4.4",
    "eslint": "8.31.0",
    "eslint-config-next": "13.1.1",
    "next": "13.1.1",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "typescript": "4.9.4"
  }
}

marc_bonenberger · June 20, 2023, 8:46am

I’ve deleted package-lock.json and then did a npm install, which has finally solved the issue!

yang · June 20, 2023, 10:39pm

What I mean is that you can run the CLI command create-plasmic-app

This will generate a brand new repo for you to verify that things work there, and you can follow the instructions earlier for using this to debug the issue and differences from your current code base that only you have access to