andywer / andywer/threads.js

Configuration for create-react-app with Typescript?

Offen
#341 6 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
3.5k
Forks
173
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.