Sage 10 move scripts back into head

robroy90 · August 22, 2022, 1:26pm

Hi!
I need to move the scripts back into head
But how does that work with sage 10?
I tried this but it is not working

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueue();
}, 100, false);

ben · August 22, 2022, 3:29pm

Do you need to? Can you help us understand why?

You would need to use the enqueueJs function:

github.com

roots/acorn/blob/16b91ac15d17a861515552e958195b11e94b2a49/src/Roots/Acorn/Assets/Concerns/Enqueuable.php#L55-L75


      
          /**
           * Enqueue JS files in WordPress.
           *
           * @param bool $in_footer
           * @param array $dependencies
           * @return $this
           */
          public function enqueueJs(bool $in_footer = true, array $dependencies = [])
          {
              $this->js(function ($handle, $src, $bundle_dependencies) use (&$dependencies, $in_footer) {
                  $this->mergeDependencies($dependencies, $bundle_dependencies);
          
                  wp_enqueue_script($handle, $src, $dependencies, null, $in_footer);
          
                  $this->inlineRuntime();
          
                  $this->mergeDependencies($dependencies, [$handle]);
              });
          
              return $this;
          }

robroy90 · August 22, 2022, 4:52pm

I’m trying to get howire turbo to work, but I’m getting this error

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry

And moving the scripts back into the head fixes this error
or is there a better way to do this?

You are loading Turbo from a <script> element inside the <body> element. This is probably not what you meant to do!

Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.

For more information, see: https://turbo.hotwired.dev/handbook/building#working-with-script-elements

This lets me load the JS in the head (and removes the error) but now somehow breaks my swiper slider

add_action('wp_enqueue_scripts', function () {
    bundle('app')->enqueueCss()->enqueueJs(false);
}, 100);