ReactJS: Refers to a value, but is being used as a type here

I was a little confused the other day when I began receiving an error that seemed to be about ReactJS, however, I was writing a non-react typescript file at the time.

Error: “Refers to a value, but is being used as a type here”

What I eventually realised, was that while it wasn’t a React component file, it was using one. I’d decided that it was the file in which I would add a root node to the DOM to attach the React app too.

my-file.ts

import MyReactApp from 'my-react-app';

const rootEl = bodyEl.createEl("div");
this.root = createRoot(rootEl);
this.root.render(
    <MyReactApp/>
);

The problem

I thought that all of my React setup only applied from within the React component, but in order for the code parser to know what to do with JSX like <MyReactApp/>, this file also needed to be a .tsx, not just a ts.

That was the only issue for me that caused this error. The file was an embed for an Obsidian plugin (You can ignore that if you’re not familiar), so it wasn’t a tsx file to start.

This stack overflow post helped me along the way.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or xTwitter for more diverse posts about ongoing projects.