-2

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: {}
Improve this question
10
  • 1
    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.
    – Jaypan
    Nov 7, 2022 at 0:36
  • @Jaypan Sorry mate, I have fixed the code in the question. I was playing around with pro versions.
    – user31782
    Nov 7, 2022 at 0:45
  • 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.
    – Jaypan
    Nov 7, 2022 at 7:12
  • 1
    The Font Awesome Kits documentation ( 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. ;)
    – Mario Steinitz
    Nov 7, 2022 at 8:05
  • 1
    Does this answer your question? How to force a JavaScript library to load in the <head> of a Drupal 8 page
    – leymannx
    Nov 7, 2022 at 22:00

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.