andywer / andywer/threads.js

Configuration for create-react-app with Typescript?

Abierto
#341 6 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
3.5k
Forks
173
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.