4

I am trying to override the Search API autocomplete JavaScript file. In mytheme.libraries, I added the following lines.

mytheme_autocomplete:
  js:
    'assets/js/autocomplete.js': { }

In mytheme.info, I added the following lines.

libraries-override:
  search_api_autocomplete/search_api_autocomplete:
    js:
      component:
        js/search_api_autocomplete.js: mytheme_autocomplete

When I visit the site, js/search_api_autocomplete.js is still loaded, while assets/js/autocomplete.js isn't loaded.

How do I override a single JavaScript file used in a library?

1 Answer 1

8

If you're overriding a single js file, you need to specify a file, not a library:

libraries-override:
  search_api_autocomplete/search_api_autocomplete:
    js:
      js/search_api_autocomplete.js: assets/js/autocomplete.js

However, specify your theme's library if you intend to override an entire library:

libraries-override:
  search_api_autocomplete/search_api_autocomplete: mytheme/mytheme_autocomplete

See the Overriding and extending libraries documentation on d.o

3
  • Thanks, I was able to override the whole library using your 2nd example, but could not override the single JS file in your first example/
    – May
    Commented Mar 3, 2022 at 15:52
  • I believe you may have added the extra "component" layer in the overrides definition. That should not be there as the search_api_autocomplete library does not specific the javascript that way. I updated the example with something that should work with that file.
    – sonfd
    Commented Mar 3, 2022 at 16:34
  • Incidentally, I believe the component / theme / base, etc weights only apply to css files, not js files, i.e. js would never have component in its definition hierarchy. See drupal.org/node/2274843#library
    – sonfd
    Commented Mar 3, 2022 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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