Illegal invocation at image.tsx (1.0.6)

On a fresh install, I’m getting the following errors on both wp.com and hosted WP JSON. This only happens on actual posts containing an image, so everything else seems to work so far.

Including a picture instead because the code editor here was insane.

Any idea why this happens? Did I miss something? :slight_smile:

1 Like

May I know the url of the API and the post that has the problem? I’ll take a look :slight_smile:

1 Like

Of course, thanks! Sending you a private message with the two examples :slight_smile:

2 Likes

Both APIs work fine here on a fresh install. Images are shown, no errors on console.

Could you please try again on a fresh install?

If it still happens, could you please run npx frontity info and paste your information here so we can try to match your system configuration?

Thanks in advance.

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

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?

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

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?

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.

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.

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:

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?

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
[email protected] C:\Users\Mark\Local Sites\healy-frontity
+-- @frontity/[email protected]
| `-- @frontity/[email protected]
`-- @frontity/[email protected] -> C:\Users\Mark\Local Sites\healy-frontity\packages\mars-theme
  `-- @frontity/[email protected]  deduped

I appreciate your time looking into this, Luis.

@frontity/[email protected] is the latest version so that’s ok.

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

No problem. We’ll find the problem sooner or later :smile:

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.

@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

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.

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.

It is the native lazy load flag.

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

@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!