Score:-2

Drupal

How to load a dependency in the in drupal 9?

user31782

11/7/23, 12:05 AM

I have followed the official documentation, but it doesn't work

global-styling:
  version: VERSION
  js:
    js/bootstrap.min.js: {}
    js/custom.js: {}
    
  css:
    component:
      css/style.css: {weight: 50}
  dependencies:
    - core/drupalSettings
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/popperjs
    - my_theme/fontawesome


fontawesome:
  js-header:
    header: true
    js:
      //kit.fontawesome.com/12345678.js: {}

This gives me error:

Drupal\Core\Asset\Exception\IncompleteLibraryDefinitionException: Incomplete library definition for definition 'fontawesome' in extension 'my_theme' in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 131 of core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

Please note that I wanna keep my js file in the dependencies, I don't want to do the following:

global-styling:
  version: VERSION
  js-header:
    header: true
      js: 
        //kit.fontawesome.com/1234556.js: {}

230

1 + 10

javascript

Jaypan

11/7/23, 12:36 AM

The code you showed does not match the error. You're receiving an error regarding a library named `fontawesome`, declared in `*.libraries.yml`, and you don't have a library with that name in the code you showed us. So something's not matching up.

user31782

11/7/23, 12:45 AM

@Jaypan Sorry mate, I have fixed the code in the question. I was playing around with pro versions.

Jaypan

11/7/23, 7:12 AM

Mario has given you a working answer, but I would question, why do you need this in the head? If it's just to ensure that it loads ahead of your own script, you can/should just set your `fontawesome` library as a dependency of the library that will depend upon it. Dependencies always load first, and as pages usually load better/faster with scripts at the end of the page, it would be better to not have it in the header. That said, if there is a specific requirement to have `fontawesome` load in the header specifically, Mario's solution is the way to go.

Mario Steinitz

11/7/23, 8:05 AM

The Font Awesome Kits documentation ( https://fontawesome.com/docs/web/setup/use-kit ) indeed states to place their code into the head of a site. Never used it myself, so I have no clue whether it's really required in a page head for all its features to work. The answer given intends to teach more about YAML anyway. ;)

leymannx

11/7/23, 10:00 PM

Does this answer your question? [How to force a JavaScript library to load in the <head> of a Drupal 8 page](https://drupal.stackexchange.com/questions/213364/how-to-force-a-javascript-library-to-load-in-the-head-of-a-drupal-8-page)

user31782

11/8/23, 12:34 AM

@leymannx that does not answer my question, I used exactly what that answer said and it didn't work.

user31782

11/8/23, 12:34 AM

@jaypan I assume fontawesome loads the font/css files via js, If I have it in the footer, I think my cssomloaded might fire before fontawesome downloads, causing FOUC.

leymannx

11/8/23, 5:59 AM

Well, looking at your question you did not use it like the other answer said.

user31782

11/8/23, 9:25 AM

@leymannx I disagree.

user31782

11/8/23, 9:28 AM

@leymannx I had to rollback your edit, because I want to focus on only dependencies. Libraries in general might not be a dependency and doesn't have to fall under `dependencies:` yaml attribute.

Score:2

Drupal

Mario Steinitz

11/7/23, 1:34 AM

js-header is not a valid libraries configuration key. If you read the documentation page closely, you will find, that it has been used as library name (first level of the yml file) for the example given.

Instead, you'll have to define your fontawesome library this way:

fontawesome:
  header: true
  js:
    //kit.fontawesome.com/12345678.js: { external: true }

YAML (in Drupal just *.yml) files are used to describe data structures (configuration). They use indentations for nested scopes. So it is very important that you don't add indentations where they aren't needed and provide configuration keys at the level where they are expected by Drupal. That is, at the second level of a library definition (first indentation), version, js, css, dependencies and header are allowed only, each of which has its own expected sub structure.

Either js or css MUST exist with at least one entry for a library. The error you have seen occurs, if you define a library without any js or css configuration keys.

+ 0

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to load a dependency in the <head> in drupal 9?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.