D11 Console Errors

The same issue occurs in Drupal 10.4.x -- it looks to me as though the `jquery.js` include from the module vendor directory is relative to the current path, rather than to webroot. In my case, it's using `learn/reading/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js` rather than `/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js`.

I'm not able to reproduce this, library definitions always reference the file relative to the module directory, and then library definition building fills in the module path.

Can you check with and without js aggregation enabled and also paste the actual HTML output of the script tags (for all the js on the site)?

I can can confirm the issue for Drupal 10.3/4 and Drupal 11.x as well. js aggregation doesn't matter.

When I insert a base tag <base href="/" /> into the page the script is loaded.

I'm not sure if I understand @catch correctly about the html output of the script tags, those are the tags as found in the html source of the page with js aggregation enabled:

<script type="application/json" data-drupal-selector="drupal-settings-json">[...]</script>
<script src="/sites/default/files/js/js_d1-8kWMDiOMJVBy649rKjQRO4_m95qyBKOJWlaeFsVQ.js?scope=header&amp;delta=0&amp;language=de&amp;theme=appsis&amp;include=eJxNTu0OgzAIfCEmv_Y8DbZV0X5FcNG3n506TYDjLoQ7Gmk1NsfokwrWhZIToFKEBZ3vaAkKLdnJaN6r4GM3o4DNSf2qCwV081IoNLfyCpymepIn9vX7D0eZL8lE0hwzUqKwKVuBjvXDTvDEP-fECl2gHuto6mNDe3YY3gX3PlyTVm5z2WbuB8Un2cO0AqfhASBKylKNr_C38gUrJG5E"></script>
<script src="/modules/contrib/cookies/js/cookiesjsr.conf.js?v=11.2.3" defer></script>
<script src="/libraries/cookiesjsr/dist/cookiesjsr-preloader.min.js?v=11.2.3" defer></script>


<script src="/core/assets/vendor/jquery/jquery.min.js?v=4.0.0-beta.2"></script>
<script src="/sites/default/files/js/js_idnebMpNkNtUzSFxlSZm7FHGN__3_p5hLHsP_eBCcGA.js?scope=footer&amp;delta=1&amp;language=de&amp;theme=appsis&amp;include=eJxNTu0OgzAIfCEmv_Y8DbZV0X5FcNG3n506TYDjLoQ7Gmk1NsfokwrWhZIToFKEBZ3vaAkKLdnJaN6r4GM3o4DNSf2qCwV081IoNLfyCpymepIn9vX7D0eZL8lE0hwzUqKwKVuBjvXDTvDEP-fECl2gHuto6mNDe3YY3gX3PlyTVm5z2WbuB8Un2cO0AqfhASBKylKNr_C38gUrJG5E"></script>
<script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js?v=1.9.1"></script>
<script src="/sites/default/files/js/js_eASfAAttq7mxI3zkv8BvVn4gDudsFbM-40Sa6w8Cwjw.js?scope=footer&amp;delta=3&amp;language=de&amp;theme=appsis&amp;include=eJxNTu0OgzAIfCEmv_Y8DbZV0X5FcNG3n506TYDjLoQ7Gmk1NsfokwrWhZIToFKEBZ3vaAkKLdnJaN6r4GM3o4DNSf2qCwV081IoNLfyCpymepIn9vX7D0eZL8lE0hwzUqKwKVuBjvXDTvDEP-fECl2gHuto6mNDe3YY3gX3PlyTVm5z2WbuB8Un2cO0AqfhASBKylKNr_C38gUrJG5E"></script>

The "Missing H5PIntegration settings." is a different story and unrelated. I'm not even sure if the 404 causes any problems, since the drupal core jquery is loaded.

I can confirm that I see this error with the Game Map interactive (1.5.4) using 2.0.0-alpha6 and D11. The jquery error is a common one across different interactives, but so far I have not seen the Uncaught TypeError: e.includes is not a function error with any other type except for Game Map, which leads me to think that part of the issue may be the JS in that library. I'll investigate more.

A little more information about the jquery pathing error:

• In src/Plugin/Field/FieldFormatter/H5PDefaultFormatter.php line 113, the gets an array of JS files via
  $scripts = $this->assetResolver->getJsAssets($assets, TRUE);
• Farther down (line 133), the 'data' value gets added to the $jsFilePaths array.
• For the jquery library, this path is relative -- modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js
• Other path values are absolute, starting with /sites/default/files/js/...
• This info gets added to the $h5p_integration variable, in line 165
  $h5p_integration['contents'][$content_id_string]['scripts'] = $jsFilePaths;
• All of this is passed into drupalSettings and eventually used the vendor/h5p/h5p-core/js/h5p.js in the H5P.getHeadTags function to generate this markup:
  <script src="modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js"></script>
• Because the path is still relative, the browser appends that path to the current path (e.g., /node/24/), which results in the jquery loading errors people are noticing.

One way to eliminate the error would be to make sure any script paths added to the $h5p_integration variable are converted to absolute. However, I'm not certain this is the correct solution. A few questions I still have:

1. This jquery library is already being loaded by Drupal, so this script tag seems redundant (at least for me in this case).
2. One of the array elements returned by $this->assetResolver->getJsAssets in line 113 is a "drupalSettings" array. This array gets passed all the way to h5p.js and the H5P.getHeadTags function which results in the markup <script src="[object Object]"></script> that generates another of the loading errors. Presumably that item should never get passed to the JS

Further digging reveals that the unexpected contents in $h5p_integration['contents'][$content_id_string]['scripts'] is what's breaking the Game Map interactive. Adding a bit of extra checking and path formatting to this code:

        foreach ($all_js as $asset) {
          $jsFilePaths[] = $asset['data'];
        }

For example to this:

        $file_url_generator = \Drupal::service('file_url_generator');
        foreach ($all_js as $asset) {
          if (is_string($asset['data'])) {
            $jsFilePaths[] = $file_url_generator->generateAbsoluteString($asset['data']);
          }
        }

The change above removes all but one of the D11 console errors I see and allows the Game Map interactive to load properly. I'll work on a patch.

Assigning to myself and updating status to active

Pushed a fix to the issue fork branch with the changes mentioned in comment #9

This issue fork / merge request is ready to be reviewed now

Actually, there is one more console error that I can see was caused by the same refactor. I'm moving this back to active to try and resolve that as well.

Thanks for the MR. One question though is why not make specifically the H5P bundled jQuery use an absolute path before it gets here since we know only that file is the problem here.

This jquery library is already being loaded by Drupal, so this script tag seems redundant (at least for me in this case).

Let's open a follow-up for this. It would be great if we can remove as much of this logic as possible and get closer to regular Drupal asset handling.

I add every possible issue I could find as related, just to make sure there is concentrated effort. Some already have a MR or patch, so we need to pick what's being fixed and needed in each case - or which are false positives (maybe #3200009?).

In my normal Drupal, non-Opigno, v10.5 installation, I personally resolved my issue only when I rolled back my H5P module version to v2.0.0-alpha3. I tried alpha6 and 2.x but none of the job did the job. I get some deprecation errors like Deprecated: Optional parameter $fileDir declared before required parameter $defaultLanguage is implicitly treated as a required parameter in /var/www/html/vendor/h5p/h5p-editor/h5peditor.class.php on line 376 but at least it works.

I tried comparing the changes between 2.0.0-alpha3 and 2.x but I can't say I found anything so specific other than the preprocess:false and minified: true specifications (check screenshot). But I think this should affect the jQuery library only; not the assets found in the sites/default/files folder...

I'm not able to reproduce the h5p-shipped jquery 1.9 being loaded with a relative path. Uploading a screenshot of how it looks on a site running Drupal 10.5 + h5p 2.0.0-alpha5

The MR as it currently is looks mostly OK - left a comment asking for an inline code comment since I'm not sure where the non-string value comes from.

If this definitely fixes the issues @illeace has found, I would prefer to have reliable steps to reproduce the bug from a clean install, but apart from that and the code comment, would be OK with merging this and opening a new issue for the remaining console error you're experiencing.

Anyone else experiencing issues, please make sure you're on at least h5p 2.0.0-alpha5 and clearly specify whether your site includes Opigno, the LMS module, or neither, as well as the specific H5P activity type in use, the specific console error you're getting, and whether there are any 404s in the network tab.

Moving to needs work since there's an MR here.

@illeace could you try the content you're trying to embed but also force the H5P formatter to use div rather than iframe embed?

I'm looking at https://h5p.org/node/99838 and wondering if we should try to remove the iframe support altogether, would allow us to entirely remove this code.

I was able to reproduce this by forcing the Opigno formatter to be ignored.

The remaining console error is this:

js_93TZSF55vBWPab2tg…Z-ZnJqSClJgBsNROm:4 Missing H5PIntegration settings.
(anonymous)	@	js_93TZSF55vBWPab2tg…Z-ZnJqSClJgBsNROm:4

I think the remaining issue might be that drupal settings (at least on the site I'm testing on) is in the footer, and h5p-integration.js doesn't wait for anything to load. We could try moving that into Drupal behaviors maybe.

@catch thank you for spending time on this! Really appreciate it!

H5P is a standalone module; it may usually be used along with Opigno but it definitely isn't a requirement (as in my case), so it's important that it works fine without it.
The only extra thing to have in mind is that the decided solution should still work with aggregation either enabled or disabled.

@vensires yes unfortunately neither the H5P module nor Opigno have been well maintained for the past five years. I was added as an H5P co-maintainer for Drupal 10 compatibility and there has been very little activity from anyone else until very recently when more co-maintainers were added (who I don't know, but are making a promising start).

I've opened 📌 Use div embed regardless of H5P plugin Active and added both issues to 🌱 Path to Beta Release Active .

I've pushed a commit for #19 and that appears to fix things locally.

Tested issue fork branch on D11, confirmed that Game Map works and that the relevant console errors are gone. Marking RTBC.

Unfortunately, it still doesn't work with Drupal 10.5 and latest H5P version (alpha6 or 2.x). All assets seems to get correctly loaded - so that's a good sign!

I still have the following errors though:
- I get an error"Uncaught ReferenceError: Drupal is not defined" which is easily solved by adding core/drupal as a dependency of the h5p.integration library.
- Immediately after the fix above, I get the following error: Uncaught TypeError: can't access property "H5PIntegration", settings.h5p is undefined for which the fix isn't straightforward.

From what I guess, it would work if the embed type of the H5P is "div" but

1. Most libraries are "iframe" only
2. The formatter still has iframe hardcoded
3. Changing from iframe to div would require a major version release, locking websites like mine in H5p alpha3, where the issue will still be not fixed.

@vensires a behaviour change in an alpha release doesn't require a new major release, but if you'd like to discuss that please do so on the issue I opened specifically about it linked above rather than here.

Pushed a change to change the dependency from core/drupalSettings to core/drupal. per #25 The previous js was relying on those implicitly via using globals, now we rely on the actual core APIs we also need the dependencies.

Really the static library definitions should be moved to an h5p.libraries.yml file leaving only the dynamic definitions in the hook, might open another issue for that.

Moving this back to needs review for more testing

@catch, the only reason I discussed about the iframe -> div here is just because I thought you had tested your fix with DIV - I'm not fully aware of what hooks/events Opigno implements, that's why. It seems this isn't the case though.

As a result, since the problems described in the issue summary are partially fixed (Explan. The resource ... was blocked due to a MIME type mismatch), I totally agree with you on merging MR!38 and opening a follow-up issue which will be more specific for the Missing H5PIntegration settings. error!

Setting as RTBC!

@vensires ah I see - no I made that mistake the first time I tried to reproduce, but have been testing with the iframe since (against 10.5, but not against a completely clean install, which may explain why you're still seeing the drupal settings error while I'm not - it could be down to another asset ordering issue or even page timing).

I'll go ahead and commit here and open a follow-up at the same time.

Went ahead and merged the MR, I've opened 🐛 H5P settings not always available in iframe Active for the remaining issue.