Errors in render and preview

[dougg0k]

Hi,

I've just found your library, seems very nice as alternative to older solutions like handlebars. But a few problems appeared, not sure why.

Firstly, if I try to import a tsx template file into a nodejs ts file. It is turned into a typescript type import.

Then the render gives an error await render(<Template data={data} />); Template refers to a value, but is being used as a type here. Did you mean typeof Template ? Which seems fine due to the import issue.

I tried to add "jsx": "react", to tsconfig.json but it didnt solve the issue.

---

Secondly, the template file, was complaining about the lack of reactjs being included there, where in your docs, you dont mention that it is needed. Maybe I missed something.

I then add reactjs and import it into the file import React from "react";.

Then I tried to preview the template, before I had added the reactjs as dependency. I got another error.

...
[20:06:32]  info  Starting build...
...                                          
ReferenceError: React is not defined

---

After adding the dependency it built. But when opening the page in the browser, the screen is empty with this error in the console. Uncaught TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

---

Can you help tell what I have done wrong? And why your docs do not mention certain things?

Does it expect to be in a frontend project?

[shellscape]

Thanks for giving it a try. This package is more for folks who are already familiar with React/JSX. I'd love to help you get up to speed but unfortunately I don't have the time. You might want to try using the plain JS project type.

[dougg0k]

I am familiar, but as I somewhat mentioned, just following your docs, got me to this.

And I wanted to fit this into a nodejs backend API to replace handlebars.

[dougg0k]

Just saw this, I might have skipped this step. https://jsx.email/docs/quick-start#new-projects

Will check what is there.

[shellscape]

Dang, sorry then. Our docs follow most use cases. But we can't account for all environments or all flavors of Node and TypeScript configs. Sounds like these issues are specific to how your env/project/repo is setup. You might want to play with the "types" property in tsconfig to get rid of requiring the React import. I won't know how to guide you on the other type issues, that'll be specific to your project.

If you use npx create jsx-email you'll be given a project directory already configured for jsx-email. You could give that a try.

[dougg0k]

Not much difference from what was set already.

[dougg0k]

I found why on the issues.

For the preview, not sure what cause it to be fixed. I installed react-dom and it worked, then I removed it, and it continued working.

For the import, it was a BiomeJS rule auto enforcing it.

And for the render(), it was because I wanted to have it in a .ts file, but it needed to be in a .tsx. Maybe there is a way, I dont know.

[shellscape]

yeah JSX needs to be in a jsx/tsx file most of the time for it to be targeted for compilation into JS. glad you stuck with it and found the solution!