Javascript error in Gutenberg

  • Resolved flyplugins

    (@flyplugins)


    2 years, 10 months ago

    When JetPack is enabled, the S3 Media Maestro plugin will not render the Gutenberg block. When using:

    add_filter( ‘jetpack_gutenberg’, ‘__return_false’ );

    the issue is resolved, however, it would seem this is not a permanent solution.

    Errors:
    Uncaught TypeError: Cannot set properties of undefined (setting ‘s3mm_mejs’)
    Uncaught TypeError: Cannot read properties of undefined (reading ‘_babelPolyfill’)

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @flyplugins

    I’ve seen you are having an issue with the Gutenberg Block not being rendered correctly when using the S3 Media Maestro while Jetpack is active.

    Did you try testing with a default theme such as Twenty Seventeen? You can go ahead with that to see if it’s a conflict happening between your theme and Jetpack.

    Let us know what you find.

    Thread Starter flyplugins

    (@flyplugins)

    Hi @muffinpeace
    Yes, we’ve attempted to use default theme (Twenty Seventeen) and have deactivated all other plugins as well with no change.

    Plugin Contributor Stef (a11n)

    (@erania-pinnera)

    Hi @flyplugins,

    Thanks for trying that.

    It would be helpful to have a reproducible case to see what’s going on.

    If you can send us a zip of the plugin, provide a link to the source code, or a code snippet that reproduces the error, we’ll be happy to look at what the conflict might be.

    We have a secure way to get this data to us, via a bespoke pastebin link we can generate, but in order to share this with you, we need you to contact us directly.

    Could you please use this contact form and mention this thread?

    Thanks a lot!

    Thread Starter flyplugins

    (@flyplugins)

    Hi @erania-pinnera,
    I’ve sent over the requested info using the contact form.

    Thank you!
    Ben

    Plugin Contributor Derek Smart

    (@dsmart)

    Hi @flyplugins, took a look at the code and the site you set up. Thanks for that!

    After enabling the SCRIPT_DEBUG constant on the site (did so via a plugin, still active on the test site), there’s a bit more context. This one particularly caught my eye:

    
Uncaught ReferenceError: S3mmEvents is not defined
    at S3MediaEditBlock.componentDidMount

The above error occurred in the <S3MediaEditBlock> component:
    at S3MediaEditBlock (webpack-internal:///./assets/js/src/blocks/s3media/index.js:231:5)
    at edit

    This script Jetpack enqueues here seems to be the conflict of this S3MediaEditBlock component. I tried to follow your code a bit, and think that it’s meant to be loading in window.S3mmEvents somehow through Vue? Not sure there, but you can see the window property is undefined when the Jetpack file is enqueued.

    Often times it’s a load order issue that conflicts like this, and thought perhaps loading your scripts earlier might help. In the s3-media-maestro/includes/Shortcode.php file, there’s a lot of methods calling the ->get_builder_scripts() which enqueues stuff in the footer by default.

    TLDR: I found a potential fix by passing false in the $this->get_builder_scripts() call on line 2071 of s3-media-maestro/includes/Shortcode.php – within the builder_scripts() method. With that context enqueuing in the header, the video loads as expected and there are no console errors.

    Hoping this helps some! Maybe you’ll have better luck debugging. I’m not seeing anything unusual with how Jetpack is enqueuing these assets.

    Hi,

    Since the issue is being addressed via our Helpdesk, I am closing the issue.

    Let me know if you have any questions.

    My best regards,

    Michelle

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Javascript error in Gutenberg’ is closed to new replies.