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

TypeError: SyntheticEvent.call is not a function in development mode with Webkit browser #10582

Closed
imsurinder90 opened this issue Aug 31, 2017 · 5 comments

Comments

@imsurinder90
Copy link

imsurinder90 commented Aug 31, 2017

Do you want to request a feature or report a bug?
It is a bug

What is the current behavior?
I am using Webpack to built React based app - pgAdmin4

The app runs in two modes:

  1. Desktop (aka runtime) mode - It opens in Webkit browser.
  2. Server mode - It opens in any of the browsers such as Chrome, Firefox etc.

I am getting the error when the app is built(using webpack) with development flag enabled.

It works fine in production mode.

scritps: {
    "webpacker": "yarn run webpack -- --config webpack.config.js",
    "bundle:prod":  "cross-env NODE_ENV=production yarn run webpacker"
    "bundle:dev": "yarn run webpacker",
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).

Since the app is run on Webkit browser, It is not possible to provide a test environment. However, If anyone wants, he can build using the steps provided in README or this blog post

What is the expected behavior?
The React base app should run without any error in dev mode.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React v15.4.2
OS - Mac OS X Yosemite(10.10.2)
Browser - annulen QtWebkit-58 Browser
Qt version - Qt5.8.0

Please let me know if you need more details.

@patrik7
Copy link

patrik7 commented Aug 31, 2017

+1

@aweary
Copy link
Contributor

aweary commented Sep 15, 2017

Hey @imsurinder90, thanks for the report. Could you please test this with the latest version of React 15 (15.6.1), and if that fails, the React 16 RC?

Assuming that fails, Is there any way you could provide a reduced repro for us to investigate? Downloading and building a full application is a bit too time-consuming for triage.

We've seen issues from these Webkit-forked browsers before. It may be an issue with their JS implementation since React works fine in all major Webkit browsers.

@imsurinder90
Copy link
Author

Hi @aweary
You are correct. We also had issues with Webkit-forked browser before and most of them were resolved by this PR10011

But this issue is neither resolved in React 15 nor in React 16(but previous issues are resolved).

This issue was that QtWekbit doesn't deal well with Proxy objects. To resolve the issue,
SyntheticEvent.augmentClass definition was moved above Proxy's SyntheticEvent generation code.
But it was a temporary solution to the problem.

Now again, Since SyntheticEvent is a proxy type of event which fails when called like SyntheticEvent.call(...) and it gives an error:

SyntheticEvent.call is not a function

However, I was able to fix it by moving following statements before Proxy SyntheticEvent code:

addEventPoolingTo(SyntheticEvent);
var SyntheticEvent_1 = SyntheticEvent;

But that's not a solution.

The other way around is make the Proxy SyntheticEvent code conditional. When the browser is of type QtWebkit, don't enter into the code block, simply skip that code.

For example:

var isWebkitBrowser = typeof window.webkitConvertPointFromNodeToPage === 'function';
if (isProxySupported && !isWebkitBrowser) {
  SyntheticEvent = new Proxy(SyntheticEvent, {...});
}

Referece link

This issue is only reproducible in QtWebkit-browser which runs on the desktop, so I can't even share IP-based URL. Sorry, I don't find any other way to provide reduced repro.

Please let me know If you need more information.

Also, where can I find the release information for React v16 since it resolves most of WebKit-browser issues(I confirmed at my end)?

@aweary
Copy link
Contributor

aweary commented Sep 19, 2017

@imsurinder90 I don't think we would want to include an explicit check for QtWebkit. If you can provide a non-intrusive change like #10011 that resolves this, we'll be happy to consider it.

I'm going to close this out since this isn't a supported environment. Feel free to ping me if you do find a non-intrusive solution for your use-case.

Thanks!

@aweary aweary closed this as completed Sep 19, 2017
@dalepo
Copy link

dalepo commented Apr 22, 2018

Hello @imsurinder90

I'm having this issue while trying to scrape a page (using splash) in a forced click event.
Do you know if there is a way to bypass this without modifying the code you mentioned?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants