developit / greenlet

🦎 Move an async function into its own thread.
https://npm.im/greenlet
4.67k stars 100 forks source link

_ref not defined in Create react app. #41

Open razzpoker50 opened 5 years ago

razzpoker50 commented 5 years ago

We are planning to use greenlet to defer expensive computations to web worker in CRA project ( along with Type script ). To test it out I was playing around with a small example.

greenlet-helpers.ts

import greenlet from 'greenlet';

export const greenletRead = greenlet(async msg => {
  return msg;
});

utils.ts

import { greenletRead } from './greenlet-helpers';

try {
    const resp = await greenletRead('Hey from greenlet');
    console.log(resp);
} catch (e) {
     console.log('Exception', e);
 }

Running into _ref is not defined when ever this gets invoked. It would be great if I can get any pointers to get this started.

P.S. I also tried moving the code snippet from greenlet-helpers to uitils and still running into the same issue.

utils.ts

import greenlet from 'greenlet';

try {
   const greenletRead = greenlet(async msg => {
       return msg;
    });

    const resp = await greenletRead('Hey from greenlet');
    console.log(resp);
} catch (e) {
     console.log('Exception', e);
 }
andreoav commented 5 years ago

Same issue here with CRA

developit commented 4 years ago

Hi there - your async function is being transpiled to use helper methods, rather than being an actual async function. If you want to use an async function with Greenlet, you need to tell TypeScript and/or Babel to preserve async functions. In tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2015"
  }
}

For those interested, you can easily check to see what a function "looks like" when it gets compiled by your build system:

const myFunction = async msg => {
    return msg;
};

console.log('' + myFunction); 

If you run the above in a stock CRA setup, you'll notice the compiled code contains a bunch of references to external variables that Greenlet isn't aware of.

If the tsconfig option doesn't work for folks (perhaps you're still required to support IE11), you can either remove the async/await, or use a String:

// Option 1: use a non-async function
const greenletRead = greenlet(msg => {
  // you can optionally use promises here instead of async/await
  return msg;
})

// Option 2: use a string
const greenletRead = greenlet(`async function(msg) {
  return msg;
}`)

await greenletRead('Hey from greenlet');
JosephScript commented 4 years ago

I tried option one and am receiving a new error uncaught exception: ReferenceError: promise_default is not defined:

const greenletRead = greenlet(msg => {
  return new Promise((resolve, reject) => {
    return resolve(msg)
  })
})

I'm curious if you have a working example? I need to support IE11.

axelboc commented 2 years ago

It works for me with return Promise.resolve(msg), though I'm using Storybook, not CRA.