I've read the main docs about this but find it lacking context. This did better job of explaining and it seems it should work. How to force a JavaScript library to load in the <head> of a Drupal 8 page EVERY attempt I try returns

A colon cannot be used in an unquoted mapping value

Searching for this, I've attempted to enclose the include line in single quotes, without, but all within context of attempting js-header

Since this YML, I'm making sure we're using two spaces for indentation and nothing else. What am I overlooking here? This is a snippet of mytheme.libraries.yml

  flexslider:
  version: 1.x
  css:
    theme:
      includes/flexslider/css/flexslider.css: {}
  js:
    includes/flexslider/js/jquery.flexslider-min.js: {}
  dependencies:
    - core/jquery

fontawesome:
  version: 1.x
  css:
    theme:
      includes/fontawesome/css/font-awesome.css: {}

global-styling:
  version: 1.3.2
  css:
    theme:
      includes/mapquest/css/mapquest.css: {}
  js-header:
    header: true
      js:
        includes/mapquest/js/mapquest.js: {}

This is portion of mytheme.info.yml that applies:

  #Libraries
  libraries:
  - mytheme/bootstrap
  - mytheme/flexslider
  - mytheme/fontawesome
  - mytheme/global-components
  - mytheme/global-styling
  • 1
    Is the indentation of the libraries section correct? You can also run YAML files through a linter to double check them, and most IDEs or editors like VSCode offer yaml linter plugins. – Kevin Aug 10 at 0:58
up vote 2 down vote accepted

I think you've indented too far. The line following header: true is directly beneath it in the example you linked to.

global-styling:
  version: 1.3.2
  css:
    theme:
      includes/mapquest/css/mapquest.css: {}
js-header:
  header: true
  js:
    includes/mapquest/js/mapquest.js: {}
  • Actually you mean he indented the js: line too far, that's underneath header: true – No Sssweat Aug 9 at 21:35
  • You're right - added the code snippet to make it more clear. Thanks – B. Schroeder Aug 9 at 21:40
  • Excellent. Quote error gone! Still not loading this JS, despite others in same /includes are loading. Are we certain this is correct syntax? CSS loads. Whenever js-header is used, it's not loaded or 'Quote' error. – sam452 Aug 9 at 22:07
  • Tested it on a local site and it looks like the header: true is a property of the library itself. See my revised code snippet. – B. Schroeder Aug 9 at 22:17
  • 1
    Yes it is. To achieve the same behavior as intended by the OP, you should as final edit add the js-header library to the dependencies of the global-styling library. – Mario Steinitz Aug 9 at 23:16

Any root level declaration in your libraries.yml file of your theme need to be added via #attached in preprocess hooks, {{ attach ...}} in a Twig file, or globally by adding it to the theme info yaml:

  #Libraries
  libraries:
    - mytheme/bootstrap
    - mytheme/flexslider
    - mytheme/fontawesome
    - mytheme/global-components
    - mytheme/global-styling
    - mytheme/js-header

I'd also advise giving it a better name than 'js-header'.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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