andywer / andywer/threads.js

Configuration for create-react-app with Typescript?

Open
#341 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.5k
Forks
173
PR merge metrics
No merged PRs in 30d

Description

Trying to get a simple sample of threads.js working within a create-react-app that was started using the typescript enabled template.

I'm using `craco` to avoid ejecting, so my `craco.config.js` contains the following:

```
const ThreadsPlugin = require("threads-plugin");

module.exports = {
module: {
// Supposedly I don't need to enable the rules since it's already enabled in react-scripts.
// rules: [
// {
// test: /\.ts$/,
// loader: "ts-loader",
// options: {
// compilerOptions: {
// module: "esnext"
// }
// }
// }
// ],
plugins: [
new ThreadsPlugin()
]
}
}
```
I've created a simple worker as `counter.ts`:

```
import {expose} from "threads/worker";

let currentCount = 0;

const counter = {
getCount() {
return currentCount;
},
increment() {
return ++currentCount;
},
decrement() {
return --currentCount;
}
}

expose(counter);
```

And in my `App.tsx` I'm creating a `Pool` and queuing a worker function:

```
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import {Pool, spawn, Worker} from "threads";

function App() {

const pool = Pool(() => spawn(new Worker("./counter")),8);
const [count, setCount] = useState(0);

const handleIncrement = () => {
pool.queue(async counter => {
const newCount = await counter.increment();
setCount(newCount);
});
}

return (



logo


Edit src/App.tsx and save to reload.



Learn React


Count: {count}
Increment


);
}

export default App;
```

Basically what what happens is that I just keep getting an error in the browser console:
`Uncaught SyntaxError: Unexpected token '<' :3000/counter:1`

It would seem to me that the `counter.ts` file isn't passing through Babel/Webpack.

Can anyone advise on how I might add `threads.js` into this project?

Thanks

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.