Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

_ref not defined in Create react app. #41

Open
razzpoker50 opened this issue May 20, 2019 · 4 comments
Open

_ref not defined in Create react app. #41

razzpoker50 opened this issue May 20, 2019 · 4 comments
Labels
has fix question Further information is requested

Comments

@razzpoker50
Copy link

razzpoker50 commented May 20, 2019

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
Copy link

Same issue here with CRA

@developit
Copy link
Owner

developit commented Oct 1, 2019

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');

@developit developit added question Further information is requested has fix labels Oct 1, 2019
@JosephScript
Copy link

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
Copy link

axelboc commented May 25, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has fix question Further information is requested
Projects
None yet
Development

No branches or pull requests

5 participants