Unable to add this library into a compound content type: "Unable to find constructor for: H5P.CardBlock 1.0"

[ymdahi]

Problem

Attempting to add this CardBlock library into a compound content type, such as the Course Presentation, yields the following error:

h5p.js?qiqnf5:976: Unable to find constructor for: H5P.CardBlock 1.0

presentation.js:1: h5p-course-presentation.js:1 Uncaught TypeError: Cannot read property 'preventResize' of undefined h5p-course-

Steps to reproduce error

• Drupal 7 instance with H5P in development mode
• H5P-CardBlock and H5P-StandardCard in /sites/default/files/h5p/development/
• Make the following edits to the CP libraries:

in h5p/libraries/H5P.CoursePresentation-1.22/semantics.json

"options": [
  "H5P.AdvancedText 1.1",
  "H5P.Link 1.3",
  "H5P.Image 1.1",
  ...
  "H5P.CardBlock 1.0"

in h5p/libraries/H5PEditor.CoursePresentation-1.22/library.json

"preloadedDependencies": [
    {
      "machineName": "FontAwesome",
      "majorVersion": 4,
      "minorVersion": 5
    },
    ...
    {
      "machineName": "H5P.CardBlock",
      "majorVersion": 1,
      "minorVersion": 0
    }

• Create a new Course Presentation in the H5P Editor.
• Find the button to add a Card Block.
• Clicking this button will cause the error above.

Screenshot:

[otacke]

@ymdahi Works fine here. Have you made sure you're not loading a cached version of some file? Disabling the cache in the developer console's network tab is often a good idea when developing.

[ymdahi]

Hmmm... not sure what could be causing this.

Cache is disabled on drupal and in the browser's dev console network tab. I've removed the libraries and re-install h5p + libraries.

I'm using the hub to "install" the content types (i.e. CP). Should I instead build the content types inside the files/h5p/development?

I attempted to add another content type to CP as a test - IFrameEmbed. I am getting the same error when I try this, so I'm assuming there is an issue with my dev environment.

[otacke]

@ymdahi I see. Yes, you should use the development folder for development ;-)

H5P doesn't simply load the files from h5p/files/libraries. It a) builds a single JavaScript file and a single CSS file and caches that (an HTML 1 speed remnant). You can clean/ignore caches, of course, but H5P also keeps library dependency lookup tables in the database, and these do not get updated automatically even when you delete the file cache - but they are for files from the development folder. Oh, and you also don't mess with the original system as you don't overwrite the original libraries.

[ymdahi]

Thank you @otacke , I'll give that a shot.

Just to confirm: when working on h5p dev I should:

git clone and npm run build the libraries/content type within h5p/files/development instead of using the H5P Hub to "Get" or "Install" the content type.

For instance, I should build the Course Presentation content type within the development folder, as well as any custom content types I may be working on.

Also, what is the best way to deal with dependencies in this case? I build CP in that folder, but I'm getting a message that I need to install several other libraries to make CP work.

[otacke]

@ymdahi You can do both. You can install the regular versions that will end up in libraries, and you can develop your own content types or modifications of existing content types in development. When H5P needs to load a library, it will first look for it in development and then in libraries. That allows you to experiment with libraries without risking to break your setup - just erase the contents of the libraries directory, and you're back to normal (unless you played with the version numbers of content types and may still need to delete the entries on the library settings page).

[ymdahi]

@otacke Many thanks, I was able to get it working! Some styling issues, but I think I have all the ingredients ready to make this a useful content type. Thanks again for all of your help!

[otacke]

@ymdahi Don't mention it.