Illegal invocation at image.tsx (1.0.6)

šŸ™‹Get Help
6

Hi. I am also getting the same errors on a fresh install on my local server with a staging API. How was this resolved?

7

We havenā€™t been able to reproduce the problem.

Can you please run npx frontity info and paste your information here so we can try to match your system configuration?

8

Hi @luisherranz. Here you go. Thanks

System:

  • OS: Windows 10
  • CPU: (8) x64 IntelĀ® Coreā„¢ i7-7700 CPU @ 3.60GHz
  • Memory: 1.67 GB / 7.95 GB

Binaries:

  • Node: 8.9.3 - C:\Program Files\nodejs\node.EXE
  • npm: 6.8.0 - C:\Program Files\nodejs\npm.CMD

Browsers:

  • Edge: 42.17134.1.0
  • Internet Explorer: 11.0.17134.1

npmPackages:

  • @frontity/core: ^1.1.2 => 1.1.2
  • @frontity/html2react: ^1.1.7 => 1.1.7
  • @frontity/mars-theme: ./packages/mars-theme => 1.1.7
  • @frontity/tiny-router: ^1.0.11 => 1.0.11
  • @frontity/wp-source: ^1.1.7 => 1.1.7
  • frontity: ^1.2.1 => 1.2.1

npmGlobalPackages:

  • frontity: Not Found
  • npx: Not Found
9

Itā€™s working fine here with Node 8.9.3 and npm 6.8.0.

Are you using "https://test.frontity.io/wp-json" in state.source.api?

10

No, but when I do itā€™s still showing the same error.

Just in case it matters, Iā€™m running frontity on my local server and using a WordPress API from a staging site.

11

I just tried to recreate on another fresh install. Iā€™m able to open the single posts on Firefox and IE.

The issue below only happens in Chrome (Version 75.0.3770.100) and with the White Screen of Death on single posts view.

The above error occurred in the <Image> component:

Moreover, in /mars-theme/src/components/post.js, removing the line

<libraries.html2react.Component html={post.content.rendered} />

loads the post in Chrome but without the content, of course.

12

Iā€™ve recreated your enviornment:

  • Chrome 75.0.3770
  • Node 8.9.3
  • Npm 6.8.0
  • OS: Windows 10
  • Exact same Frontity packages (fresh install)

and I canā€™t make it fail:

57
Screen Shot 2019-07-09 at 09.57.57.png1057Ɨ776 450 KB

Iā€™m not sure what else to tryā€¦

  • Are you aware of something different in your system/configuration?
  • What version of @frontity/components do you have installed?
    ā€“ You can check it with npm ls @frontity/components.
  • What happens when you visit https://mars.frontity.org? Does it fail?
13

Great.

What happens when you visit https://mars.frontity.org? Does it fail?

It fails in Chrome (normal, incognito, and new profile). Still works on other browsers.

Are you aware of something different in your system/configuration?

The system/config is not that too modified. Chrome extensions have no effect. It still doesnā€™t load after opening the site in Incognito mode or after creating a new profile. However, when accessing the site on another PC, it loads on their Chrome. Must be something in my Chrome settings. Iā€™ll let you know.

What version of @frontity/components do you have installed?
ā€“ You can check it with npm ls @frontity/components .

C:\Users\Mark\Local Sites\healy-frontity>npm ls @frontity/components
healy-frontity@1.0.0 C:\Users\Mark\Local Sites\healy-frontity
+-- @frontity/html2react@1.1.7
| `-- @frontity/components@1.1.7
`-- @frontity/mars-theme@1.1.7 -> C:\Users\Mark\Local Sites\healy-frontity\packages\mars-theme
  `-- @frontity/components@1.1.7  deduped

I appreciate your time looking into this, Luis.

14

@frontity/components@1.1.7 is the latest version so thatā€™s ok.

Are you using any flags? (chrome://flags/)

15

No problem. Weā€™ll find the problem sooner or later :smile:

16

I had flags enabled for ā€œEnable lazy image loadingā€, ā€œEnable lazy frame loadingā€ and ā€œAllow invalid certificates for resources loaded from localhostā€. But when I disabled them nothing happened. Even after I reset all the flags to default.

17

@luisherranz Good news. Iā€™m now able to load mars.frontity.org and my local site in Chrome after I cleared my internet data and junk in Chrome. Whew!

Thanks for all your help. Cheers!

3 Likes
18

Hey @espidesigns, Iā€™m glad you solved it. Sorry for the delay in my answer :slight_smile:

Iā€™m going to test those flags here to see if we can figure out what may have caused the issue.

19

Yesterday, after my Chrome browser had updated to Version 76.0.3809.100 I started to get the same error. I disabled the Enable lazy image loading flag in chrome://flags (now it comes enabled by default) and then it worked as expected.

I think It wouldnā€™t be a good idea to ask users to deactivate it in order to use Frontity, itā€™s necessary to make Frontity compatible with that flag so I will investigate to see what can be done to fix this issue. @luisherranz, did you investigate anything about this flag?

In the meantime, the Enable lazy image loading flag should be disabled while developing with Frontity.

20

It is the native lazy load flag.

We need to make it work because it will be enabled by default in Chrome 77.

21

@orballo fixed the Illegal invocation error in this PR :smile:
Itā€™s merged and released: Frontity update: 12 August 2019

The lazy image loading flag can now be enabled after doing a npm update in your Frontity project!

22

It doesnā€™t crash thanks to the latest changes, but native lazy load still doesnā€™t work! When the flag is active all the images are loaded.

23

I see. I have been able to reproduce the bug and Iā€™m working to solve it.

24

It seems like if you set loading="auto" even with the lazy image loading flag enabled in chrome://flags the images are not loaded lazily. If I set loading="lazy" for every Image, it worksā€¦

We can use loading="lazy" by default in the Image component or pass the loading property every time Image is rendered in the theme. We can also make it configurable from the settings and set it to lazy by defaultā€¦

What would be the best option, @luisherranz?

25

Ohhh, I see. Then we thought it was not working because in "auto" the browser is the one making the decision. So, if it works with "lazy", then it is working just fine! Maybe if we try with Slow 3G it does the lazy loading.

Iā€™d leave the default as "lazy" for nowā€¦