Issue with symlink in mono repo: "No client-side render() hook found." with a renderer in a local package
#690
-
DescriptionHi, This setup gives me the following error: I think it is because the "consumer" of the renderer package can't find the renderer folder in the node_modules folder. I put together two minimal reproductions, one using PNPM workspaces (which is the first that gave me an error) and one using NPM workspaces (to see if it was an issue with PNPM first).
Both reproduction use the step-react package and the stem-react examples. The only modification I made is that I removed the isActive logic from Link.tsx to avoid having to switch the dependencies while debuging. I have a feeling that the error is due to the renderer package being symlinked but I am not really sure. You can see in the README's of the reproductions the logging that shows that in one case the external I checked in the docs and in the GitHub issues if there was anything related to symlinks and mono repo without success so I post this here. Let me know if I can provide more context and thanks in advance for any answer ! Error Message + Error Stack |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
I didn't had a closer look at your example, but it's likely due to the fact that VPS currently only crawls packages with a name that have the prefix If you rename your package to Note that the Extensions API is experimental and subject to breaking changes. Curious: what is it you're building? |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your fast answer, I tried adding stem- as a prefix and it indeed work ! May I know what stem stands for ? I am building a Django-like framework as an experiment to learn more about javascript and vite. I am using another small project of mine which adds a On the VPS side I use classes to mimic Django class based views: // pages/about/index.page.server.ts
import { Template } from "@my-framework/stem-renderer/templating";
import { MainLayout } from "../../layouts/layout";
export class Page extends Template {
templateName = "arbitrary_folder/about.html";
layout = MainLayout;
getContextData() {
return {
buttonContent: "hello",
};
}
post(requestBody: Record<string, any>) {
console.log(requestBody);
return super.post(requestBody);
}
}// layouts/layout.ts
import { Layout } from "@my-framework/stem-renderer/templating";
import "../index.css";
export class MainLayout extends Layout {
templateName = "layout.html";
getContextData() {
return {
nav: [
{
href: "/about",
name: "about",
isActive: this.urlPathname === "/about",
},
{
href: "/",
name: "home",
isActive: this.urlPathname === "/",
},
],
};
}
}<!-- pages/about/arbitrary_folder/about.html -->
<div class="bg-gray-100">
<button type="button">
{buttonContent}
</button>
<include src="arbitrary_folder/card.html"></include>
<form action="./about" method="post" enctype="multipart/form-data">
<input type="text" name="test" />
<button type="submit">submit</button>
</form>
</div><!-- layouts/layout.html -->
<section>
<nav>
<ul>
<for condition="const item of nav"><li><a href="{item.href}" style="{item.isActive ? 'background-color: red;' : ''}">{item.name}</a></li></for/>
</ul>
</nav>
<slot></slot>
</section>It is really inefficient compared to modern "component-based" frameworks such as React, Svelte or Solid but I have a lot of fun building it and I learn a lot ! I love how VPS allows me to do this weird stuff as it is not opinionated over the Page object. Thank you again for your work. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds neat, have fun experimenting :-). I'm actually interesting in (folks) building frameworks on top of VPS. Let me know (feel free to PM me on Discord) if you want to take your tinkering to the next level. What I really liked back in the days about Danjo is its integrations e.g. Wagtail CMS + authentication. It was truly inspirational how easy and quickly you could get started. Stem: https://stemjs.com/. |
Beta Was this translation helpful? Give feedback.
-
|
Wow the stem idea is nice ! Initially I wanted to create a small frontend js library to add reactivity to Django projects. To test my library I wanted to refactor a site on mine currently using SvelteKit but I needed a server + file base routing so I chose VPS and here I am trying to build a framework. I'll let you know once my api's are more stable and once I have a 0.0.1 version on npm, I'll certainly have some questions about VPS best practices and also the upcoming V1 which If I follow the RFC. Thanks again ! |
Beta Was this translation helpful? Give feedback.
I didn't had a closer look at your example, but it's likely due to the fact that VPS currently only crawls packages with a name that have the prefix
@org/stem-.If you rename your package to
@some-org-name/stem-, does it work then?Note that the Extensions API is experimental and subject to breaking changes.
Curious: what is it you're building?