Plasmic sync not doing relative import paths

Issues
1

OK I am in the process of setting up codegen, and I’m really struggling with getting the importPath in my plasmic-init.ts file to work. Would love some help —either there is a bug in plasmic sync or I am misunderstanding something basic.

My directory structure looks like this

    .  (root directory of nextjs project)
    |
    + src
    |  L components
    |     L common
    |        L NavBar
    |           L index.tsx  // file containing NavBar module 
    L components
       L all my plasmic files

My plasmic.json file defines the following srcDir

// plasmic.json 

  "srcDir": "components",

All my code components that are from other packages are working just fine, e.g. this works great:

// plasmic-init.ts

PLASMIC.registerComponent(Html, {
  name: 'EmailHtml',
  props: {
    children: 'slot',
    lang: 'string',
    dir: 'string',
  },
  importPath: '@react-email/html'
});

But when I try to register one of my own components:

// plasmic-init.ts

PLASMIC.registerComponent(NavBar, {
  name: 'NavBar',
  props: {
    leftSide: {
      type: 'slot',
      defaultValue: []
    },
    showLink: 'boolean'
  },
  importPath: '../src/components/common/NavBar'
});

I get a build error when doing npm run build :

./components/plasmic/osito/PlasmicAbout.tsx
Attempted import error: 'NavBar' is not exported from 'src/components/common/NavBar' (imported as 'NavBar').

Import trace for requested module:
./components/plasmic/osito/PlasmicAbout.tsx

I inspected the Plasmic-generated tsx file to see what was going on, and I found this:

// app/components/plasmic/osito/PlasmicAbout.tsx

import { NavBar } from "src/components/common/NavBar"; // plasmic-import: RaLtnrQhk5/codeComponent
import { Main } from "src/components/common/Main"; // plasmic-import: 2Pfh91dOe9/codeComponent

which is strange because that import path is missing several .. prefixes. It should be ../../../src/components/common/NavBar in order for the build to work.

Is there something different I should be putting as my importPath? I’ve tried everything I can think of but I can’t explain why plasmic sync is behaving in this way.

Any help would be appreciated. @chungwu

2

A couple things that shouldn’t be relevant but maybe they are:
• yes, i have both a components and a src/components directory
• my nextjs root directory is actually nested under my github repo root directory at ./app — but this shouldn’t matter to plasmic I think

3

hmm, can you try setting srcDir to ./components

4

No luck, same result :disappointed: @chungwu

5

OK @chungwu, I think I have it working now. I did several fresh codegen setups without luck, until I tried customizing the settings like this:

? What directory should React component files (that you edit) be put into?
> src/components

Now it seems to work. The imports in the generated Plasmic files still look like this:

// src/components/plasmic/osito/PlasmicAbout.tsx

import { NavBar } from "src/components/common/NavBar"; // plasmic-import: RaLtnrQhk5/codeComponent
import { Main } from "src/components/common/Main"; // plasmic-import: 2Pfh91dOe9/codeComponent

But now they compile correctly.

6

I’m not quite sure why this import statement works when it’s at the path src/components/plasmic/osito/PlasmicAbout.tsx , but the identical import statement doesn’t work from components/plasmic/osito/PlasmicAbout.tsx

7

Maybe it has something to do with conflicting paths in my tsconfig.json file:

// tsconfig.json:

"paths": {
      "@core/*": ["core/*"],
      "@src/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
}
8

Anyway, I seem to have codegen working now, but wanted to document the above in case it’s helpful to anyone else

9

@chungwu Just for kicks I created a completely new plasmic studio project and completely new nextjs project using create-plasmic-app and I can repro this issue

10

Even on a completely fresh project with default settings, I get this error when I try to do plasmic watch for the first time.

Plasmic error: "srcDir" in plasmic.json is outside of /Users/andys/Sites/codegen-test
11

So either there’s something very weird about how my local machine is configured (i don’t think there is) or it’s a bug on the plasmic side

12

hmm what is your srcDir set to?

13

this is what’s in my totally default out-of-the-box plasmic.json file that was created by create-plasmic-app

"srcDir": "components",
14

On my real osito project I am also continuing to see path weirdness with codegen. For example one of my plasmic components renders like this

// PlasmicHomeContent.tsx

...
                  src={{
                    src: "/plasmic/osito/images/cornerBearTransparentpng2.png",
                    fullWidth: 562,
                    fullHeight: 673,
                    aspectRatio: undefined
                  }}
15

Looks like this was caused by images.publicDir being set incorrectly in plasmic.json

16

I fixed it now. However the CMS components are still failing to load. I suspect this is because of some path issue also

17

I just get a Loading indicator where my CMS driven components are supposed to be
@chungwu any ideas?

image.png
image.png2758×670 33.6 KB

18

Maybe the plasmic cms packages aren’t being correctly imported by codegen?

I get this error message from plasmic watch:

Warning: watch only works for projects with version="latest". Ignoring hjKYmYi6HMwK6TRyk7ew5R

and that project id seems to correspond to the plasmic cms project in my plasmic.json

19

OK more path shenanigans. Whenever I run plasmic sync it is still trying to download the plasmic images to the old (wrong) location :

andys@Pihi app % plasmic sync -p x3BRoeULyhdk8ph55271iu
? File /Users/andys/Sites/osito/app/src/public/plasmic/osito/images/logoGraysvg.undefined not found. Do you want to recreate it? (Use arrow keys)
❯ Yes 
  No

This despite the fact that I have the correct location specified in my plasmic.json now:

// plasmic.json

  "images": {
    "scheme": "public-files",
    "publicDir": "../../public",
    "publicUrlPrefix": "/"
  },
  "tokens": {
    "scheme": "theo",
    "tokensFilePath": "plasmic-tokens.theo.json"
  },
  "srcDir": "src/components",
  "defaultPlasmicDir": "./plasmic",
20

Do I need to do something special to force plasmic sync to recognize changes to plasmic.json?