Global context API questions

I have question regarding the GlobalContext API.

  1. Does the registered context component wraps the ? OR
  2. Does it wrap each individual page?
    The question is in the context of Headless API.

I asked this question because same code for registeredGlobalContext works in CodeGen but not in Loader API project.

the wrapping happens at PlasmicRootProvider for the loader api

For some reason the Context isn’t working in Loader api. Do I need to configure something for that?

Based on the documentation of Chakra UI. The App component should be wrapped in ChakraProvider component so the styles are applied properly.

I registered that component as a Global Context.

import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
import registerGlobalContext, {
} from '@plasmicapp/host/registerGlobalContext';

import { Registerable } from './registerable';

export { ChakraProvider };

export const chakraProviderMeta: GlobalContextMeta<ChakraProviderProps> = {
  name: 'ChakraProvider',
  displayName: 'Chakra Provider',
  props: {
    resetCSS: {
      type: 'boolean',
      defaultValue: true,
    portalZIndex: {
      type: 'number',
      defaultValue: undefined,
  importPath: 'plasmic-chakra-ui-cc',
  importName: 'ChakraProvider',

export function registerChakraProvider(
  loader?: Registerable,
  customchakraProviderMeta?: GlobalContextMeta<ChakraProviderProps>
) {
  const doRegisterComponent: typeof registerGlobalContext = (...args) =>
      ? loader.registerGlobalContext(...args)
      : registerGlobalContext(...args);
    customchakraProviderMeta ?? chakraProviderMeta

It works perfectly fine in CodeGen but for some reason the styling breaks for Loader API which means the Global Context isn’t applied properly.

Hmm does it work in the artboard? Or is it broken there too?

It works in Artboard.

In Preview Mode, only the heading styles are broken.

Locally on Loader API. Chakra Styles are missing

The following error now occurs in CodeGen. It might helps.

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
TypeError: Cannot read property 'componentImportPath' of undefined
    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:253:22
    at Array.forEach (<anonymous>)
    at replaceImports (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:160:23)
    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:486:32
    at (<anonymous>)
    at /mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:27:71
    at new Promise (<anonymous>)
    at __awaiter (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:23:12)
    at fixGlobalContextImportStatements (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:473:12)
    at Object.<anonymous> (/mnt/d/Work/youtube/LPWA/plasmic-library/plasmic-chakra-ui-codegen/node_modules/@plasmicapp/cli/dist/utils/code-utils.js:356:9)

It does sync down the changes alongside the above error.

Also, the CodeGen styling is consistent with the preview mode. i.e heading styles are broken. Most probably, it’s related to third party library.

For some reason, the plasmic cli is looking for a different UUID when syncing registered global context component :thinking_face:

// Searching for the following UUID
{ uuid: '5vYVImIQb7' }

// log of fixImportContext.codeComponentMetas
  metas: {
    bIaOvNJfMB: {
      id: 'bIaOvNJfMB',
      name: 'ChakraButton',
      componentImportPath: 'plasmic-chakra-ui-cc'
    'NT-RGDSuwm': {
      id: 'NT-RGDSuwm',
      name: 'ChakraProviderWrapper',
      componentImportPath: 'plasmic-chakra-ui-cc'