Can't add code components in mode react(not Next)

Issues
1

1 、I followed this step:studio.plasmic.app → Code

image
image713×648 35.6 KB

2、modified src/App.tsx to:

import * as React from 'react';

import { PlasmicCanvasHost } from '@plasmicapp/loader-react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

import { PLASMIC } from './plasmic-init';

export default function AppRoot() {

  return (

    <Router>

      <Routes>

        {/* Your other routes... */}

        <Route path="/plasmic-host" element={<PlasmicCanvasHost />} />

      </Routes>

    </Router>

  );

}

3、plasmic-init.ts：

import { initPlasmicLoader } from "@plasmicapp/loader-react";

import { HelloWorld } from './components/HelloWorld';

export const PLASMIC = initPlasmicLoader({

  projects: [

    {

      id: "62VSfAAG9cDdbzfti1bnc4",  // ID of a project you are using

      token: "23XjhNUyKQaDBfUYZcbo4cXLJUUWIIeQ3ifI0TJzDIpUsfntkxC2IHIq8FR9thbIhVzQPLmdOu9DYlPA7SOg"  // API token for that project

    }

  ],

  // Fetches the latest revisions, whether or not they were unpublished!

  // Disable for production to ensure you render only published changes.

  preview: true,

})

PLASMIC.registerComponent(HelloWorld, {

    name: 'HelloWorld',

    props: {

      verbose: 'boolean',

      children: 'slot'

    }

  });

4、at http://localhost:3000/plasmic-host address seen:

image
image819×917 65.9 KB

5、but can’t found code components HelloWorld
image
image402×896 30.6 KB

By the way when I use Next.js mode, the result is：

image
image365×862 21.5 KB

the code component HelloWord can saw in it.

2

For your convenience, I made a quick example here you can try. I just confirmed that it works.

Make sure you remember to configure your app-host on your project to point to your dev server. (via configure project as in your screenshot)

3

Hi ray,Thanks you example!
I have seen the code component HelloWord in studio.plasmic now.
I modified src/App.tsx to:

import * as React from 'react';

import { PlasmicCanvasHost, PlasmicRootProvider } from '@plasmicapp/loader-react';

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

import { PLASMIC } from './plasmic-init';

import Feed from './components/Feed';

export default function AppRoot() {

  return (

    <PlasmicRootProvider loader={PLASMIC}>

      <Router>

        <Routes>

          {/* Your other routes... */}

          <Route path="/plasmic-host" element={<PlasmicCanvasHost />} />

        </Routes>

      </Router>

    </PlasmicRootProvider>

  );

}
1 Like