Common issues

Use our list of suggested troubleshooting steps when you encounter an issue.

Here are some common issues that you might encounter when working with your Plasmic project:

Plasmic project issues

Hydration errors

A common issue is illegal nesting of HTML. For example:

  • Nesting links within links
  • Nesting divs within paragraphs
  • Nesting buttons within links
  • Etc.

When doing SSR/SSG (e.g. using Next.js), HTML is sent first, then JS hydrates it, and the DOM structures should match. But with illegal nestings, the browser will actually try to “unnest” these in the HTML response, and then the JS hydrated structure won’t match. Learn more.

Note that sometimes this nesting can happen across different component boundaries.

To track these down, open Chrome Devtools console and query your page for these. Common nestings are:

Copy
document.querySelector('a a');
document.querySelector('p div');

You can also try to narrow down the problem.

Seeing whitespace on the right

This is due to some element on the page that has a fixed width or fixed min-width that is too wide, causing the entire viewport (typically on mobile devices) to extend to the right

You can either:

  • Use Chrome Devtools’s inspector to sweep your mouse down the whitespace on the page until it highlights some element that is “sticking out”.
  • Incrementally try deleting parts of your page until the issue is gone (usually you can see it in preview mode). Narrow down the problem.

Incompatible Plasmic package versions

@plasmicapp packages can depend on each other. Each package always has an exact version of its @plasmicapp dependencies. This is because we want to ensure that all packages are always in sync, and that we don’t end up with a mismatched set of packages.

Packages like @plasmicapp/host must also be deduped, since functionality such as registerComponent make use of globals and side effects, so with multiple versions you could end up using the wrong “instance” of this package. Additionally, types can be tightly coupled across multiple packages.

Unfortunately, npm and yarn make it easy for you to end up with mismatched versions and duplicate versions of packages. Use the npm list command to ensure that you have unique deduped versions of packages. Furthermore, issues can be “sticky,” since npm/yarn are stateful. At times, you may need to rely on npm dedupe, or removing and reinstalling Plasmic packages (including @plasmicpkgs packages), resetting package-lock.json/yarn.lock, in order to unwedge npm/yarn.

Examples:

  • You may have a mismatched version of @plasmicapp/host when there’s already one included in the @plasmicapp/loader-nextjs.
  • You tried upgrading @plasmicapp/loader-nextjs, but npm/yarn did not end up upgrading @plasmicapp/host.

@plasmicpkgs (the built-in code component packages) have @plasmicapp packages as peer dependencies, and these specify ranges rather than exact versions—this is to offer some flexibility for developers to use the core package versions they need, while still using @plasmicpkgs.

Importing from the wrong package

When you have multiple Plasmic packages installed, make sure you are importing from the correct one.

You may be importing DataProvider from @plasmicapp/host instead of @plasmicapp/loader-nextjs.

Not picking up changed invocation of initPlasmicLoader

For some frameworks, like Next.js, initPlasmicLoader performs some file level caching in order to speed up development iteration.

You’ll need to stop and restart your server if you change the initPlasmicLoader flags, due to caching that the Plasmic SDK performs.

My designs are not updating in my application codebase (using PlasmicLoader with Gatsby).

A common pitfall with Gatsby projects is knowing when you need to clear the cache.

Run:

Copy
gatsby clean

Then your next npm run build or npm run develop should refetch data, including Plasmic content.

Codegen

Element type is invalid: got undefined

If you are using codegen and get this React error:

Copy
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.

This is usually due to missing or incorrect import paths in your custom code component registration.

Plasmic CLI

Authentication errors from the CLI or Loader

The easiest way to get your system authenticated with Plasmic is to use our CLI with the following command:

Copy
npx -p @plasmicapp/cli plasmic auth

However on rare occasion, this process may also fail. To debug this situation, check for the existence of this file in your home directory: ~/.plasmic.auth.

If it does not exist, you can create the file manually like this:

Copy
{
  "host": "https://studio.plasmic.app",
  "user": "EMAIL_HERE",
  "token": "TOKEN_HERE"
}

Make sure that the email you insert here is the one that you used to sign up with on Plasmic Studio. You can get your access token from your settings. This file is all you need to authenticate your system.

Is this page helpful?

NoYes