developit / greenlet

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

ReferenceError: _isomorphicFetch2 is not defined #23

Closed hmtri1011 closed 6 years ago

hmtri1011 commented 6 years ago

I got this error when using my fetchJSON function. This is my code:

const fetchFunc = (url, isServer = false) => {
  return fetch(url).then(res => {
    if (res.status !== 200) {
      throw new Error('Not 200 status')
    }
    return res.json()
  })
}

const fetchJSON = typeof window !== 'undefined' && window.Worker
  ? greenlet(fetchFunc)
  : fetchFunc

Update: With async/await code the error become 'ReferenceError: _ref is not defined'

const fetchFunc = async (url, isServer = false) => {
  const res = await fetch(url)
  if (res.status !== 200) {
    throw new Error('Not 200 status')
  }
  return await res.json()
}

const fetchJSON = typeof window !== 'undefined' && window.Worker
  ? greenlet(fetchFunc)
  : fetchFunc

Without greenlet, my code works well const fetchJSON = fetchFunc

Any helps would be appreciated! Thank you!

Kanaye commented 6 years ago

Hi @hmtri1011.

Because you 're using trackFetch which is not defined within your fetchFunc it looks to me like your function isn't pure.

In your async/await example, there are probably more things missing like e.g. babel-runtime.

Could you comment out the trackFetch line in your Promise based code and try again ?

hmtri1011 commented 6 years ago

Hi @Kanaye already removed but still not work. I try the getName example but it does not work either!

image

image

I use it on my React app

Already add require('babel-polyfill') and

module.exports = {
  devtool: 'cheap-module-source-map',
  context: __dirname + '/client/scripts',
  entry: {
    app: ['babel-polyfill', './index.js'],
  },
  ...
}

to my webpack config

Kanaye commented 6 years ago

Babel polyfill won 't work within greenlet. Greenlet only supports pure functions. In case of babel-polyfill the required code is not stored within the function and therefore making it impure.

Here the example converted to pure promises: https://codesandbox.io/s/3rzrw88p65

hmtri1011 commented 6 years ago

ReferenceError: _isomorphicFetch2 is not defined This is what I got when trying your code example

Kanaye commented 6 years ago

Ah got it. You are polyfilling fetch and therefore your function is not pure. Can you remove your polyfill for testing ?

hmtri1011 commented 6 years ago

Hmmm :( still not working :( another question, how do I polyfill web worker for Node since node-webworker did not work

developit commented 6 years ago

Use a require statement in your greenleted function.

imdanielpiva commented 6 years ago

UPDATE

I forgotten to mention that the example that @Kanaye provided above worked perfectly for me.


Hi, guys. I'm having the same issue, even with the given example in the docs. The error is the following:

"Uncaught (in promise) ReferenceError: _ref87 is not defined"

developit commented 6 years ago

Please open new issues for each separate issue. For those finding this: if you use an automatic polyfilling solution like babel-polyfill or Webpack's DefinePlugin/ProvidePlugin, you're making the function you pass to Greenlet impure:

the code you wrote:

greenlet( async => await fetch('/foo') )

the code you're actually running:

import polyfilledFetch from 'whatwg-fetch';

greenlet( async => await polyfilledFetch('/foo') )

Notice how the transformed code is no longer a pure function, since it has dependencies in the outer scope.