Electron-forge: How can I use electron-forge to develop a TypeScript React application?

Created on 4 Jan 2018 · 4Comments · Source: electron-userland/electron-forge

[x] I have read the contribution documentation for this project.
[x] I agree to follow the code of conduct that this project follows, as appropriate.
[X] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

I have installed electron-forge with the React+TypeScript template. The description of this template says that it will "get me off the ground using React and TypeScript together" but it gives me no information on how to use them together. The renderer process HTML file included in forge + react + typescript has no script tag and hence gives no clue how to run tsx files in the electron renderer process.

According to the electron-prebuilt-compile doc, I can use React code in the electron renderer process. I assume this means that I should be able to include jsx files in the script tag in the HTML file being rendered. However, there is nothing about using tsx files in the electron-prebuilt-compile doc. I tried the following

Create a simple Hello React script:

// Hello.tsx
import * as React from "react";

interface HelloProps {
  name: string;
}

class Hello extends React.Component<HelloProps, {}> {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

export default Hello;

// index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import Hello from "./Hello";

ReactDOM.render(
  <Hello name="Kinnucan" />,
  document.getElementById("root")
);

Include the script in the renderer process html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    Well hey there!!!
    <div id="root"></div>
    <script type="text/javascript" src="index.tsx"></script>
  </body>
</html>

Start electron:

PS C:\Users\Paul\OneDrive\dev\forge-react-ts> electron-forge start
√ Checking your system
√ Locating Application
√ Preparing native dependencies
√ Launching Application

The browser window appears with the following error message:

uncaught SyntaxError: Unexpected token < index.tsx:8

which refers to the line in the following compiled script:

"use strict";
exports.__esModule = true;
// Remember to rename the file from app.ts to app.tsx
// and to keep it in the src/ directory.
var React = require("react");
var ReactDOM = require("react-dom");
var Hello_1 = require("./Hello");
ReactDOM.render(<Hello_1["default"] name="Willson"/>, document.getElementById("root"));

It appears that the tsx is not being correctly compiled.

What am I doing wrong?

Source

pkinnucan

👍1

Most helpful comment

I would REALLY love to know how this got fixed. This honestly tells me nothing about how this has been fixed. Not even version numbers.

Please help.

WickedSik on 21 Feb 2019

👍4

All 4 comments

Hi, I have the same issue. Did you ever find out what you need to do? thanks, Tilli

utillity on 9 Mar 2018

very strange, copying my whole project to a new electron-forge template and everything works. must be some global configuration...

utillity on 9 Mar 2018

I did solve this problem. I recreated the Electron project with the react/typescript template. The installer installed a complete, working "hello world" app. Very nice. It's possible either that the template was updated between my first attempt and my second or I made a mistake in my first attempt.

pkinnucan on 10 Mar 2018

I would REALLY love to know how this got fixed. This honestly tells me nothing about how this has been fixed. Not even version numbers.

Please help.

WickedSik on 21 Feb 2019

👍4

Was this page helpful?

0 / 5 - 0 ratings