Code component registration. Import problem on sync

Issues
1

ERROR in ./src/components/plasmic/starter/PlasmicDashboard.tsx 22:0-67

Module not found: Error: You attempted to import …/…/…/…/components/Registration which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project’s node_modules/.

It’s not properly using the right import path when I change the input path to …/…/…/components/Registration Everything works normally and fine but whenever I do plasmic sync It again changes the path to …/…/…/…/components/Registration

This is how my current file structure is

image
image1326×635 70.5 KB

2

Take a look at our docs about plasmic.json. You can probably fix this using the srcDir field.

3

I think I’m doing everything right according to the documentation but I’m still getting that error here is my plasmic.json. If it’s not too much trouble can you tell me what I should change in it or what path should I put for srcDir

plasmic.json
{
“platform”: “react”,
“code”: {
“lang”: “ts”,
“scheme”: “blackbox”,
“reactRuntime”: “classic”
},
“style”: {
“scheme”: “css-modules”,
“defaultStyleCssFilePath”: “plasmic/plasmic__default_style.module.css”
},
“images”: {
“scheme”: “files”,
“publicDir”: “…/…/public”,
“publicUrlPrefix”: “/static/”
},
“tokens”: {
“scheme”: “theo”,
“tokensFilePath”: “plasmic-tokens.theo.json”
},
“srcDir”: “src/components”,
“defaultPlasmicDir”: “./plasmic”,
“projects”: [
{
“projectId”: “”,
“projectApiToken”: “”,
“projectName”: “plasmic-basic-components”,
“version”: “>0.0.0”,
“cssFilePath”: “plasmic/plasmic_basic_components/plasmic.module.css”,
“components”: ,
“icons”: ,
“images”: ,
“indirect”: true,
“globalContextsFilePath”: “”,
“splitsProviderFilePath”: “”,
“codeComponents”: [
{
“id”: “CMDBvOhaI4s”,
“name”: “Iframe”,
“displayName”: “hostless-iframe”,
“componentImportPath”: “@plasmicpkgs/plasmic-basic-components”
},
{
“id”: “RhitNJW5Zu-”,
“name”: “Video”,
“displayName”: “hostless-html-video”,
“componentImportPath”: “@plasmicpkgs/plasmic-basic-components”
},
{
“id”: “PKldDYkH42”,
“name”: “Embed”,
“displayName”: “hostless-embed”,
“componentImportPath”: “@plasmicpkgs/plasmic-basic-components”
},
{
“id”: “Registration”,
“name”: “Registration”,
“componentImportPath”: “./components/Registration”
},
{
“id”: “D4RbnlpRXg3”,
“name”: “DataProvider”,
“displayName”: “hostless-data-provider”,
“componentImportPath”: “@plasmicpkgs/plasmic-basic-components”
},

4

I have tried almost everything out there that I can but I still can’t figure this out. I think it’s a bug at this point If I put importPath: ‘./testComponent’,
It will get imported as import { testComponent} from “…/…/…/…/testComponent”;

5

Hello. I had the same problem as you, but was able to solve it here.

Essentially it came down to us accidentally compiling the project as a JavaScript project and then changing the plasmic.json from js to ts. But that wasn’t enough.

I break down my full problem as well as our solution in the linked topic. Hopefully, our problems were similiar and you get the help you need. I completely understand how frustrating this is because I was creeping on your post for about a week before we just solved it.