Custom Component script.js not compiling #591

Iain-g · 2025-02-14T13:48:52Z

Iain-g
Feb 14, 2025

I'm creating a new component (for banner messages) in 'Components/SiteBanners' - the functions.php, index.twig and _style.scss are all behaving as expected. However Vite doesn't seem to react to changes in the script.js - terminal shows no page reload when I save, and a manual browser refresh doesn't show js has worked (just a console.log for now). If I paste the same js into a different component's script.js Vite reloads the page and the js works.

Do I need to do anything different because the component adds fields to a Global Options sub-page? That's the only thing I can think of which is different to other components.

Answered by aaronmeder

Feb 14, 2025

Hey @Iain-g it seems to work for me. I've added it as a minimal / empty component like this:
https://github.com/aaronmeder/various-code/tree/main/Flynt-Components/SiteBanner

To test I've added it this the templates/_document.twig file directly inside the <body>:
{{ renderComponent('SiteBanner') }}

When I open the site it will show the "init SiteBanner 👋🏻" output in the browser console as expected.

You should also be doing that if you haven't:

Add a .env file to your theme directory that contains VITE_DEV_SERVER_HOST=http://yourlocalwpsite.test (adjust the domain to point to your local Wordpress site)
Either run npm run start (and keep running) or npm run build:production in the theme dir…

View full answer

aaronmeder · 2025-02-14T13:55:10Z

aaronmeder
Feb 14, 2025

@Iain-g can you share the component's code?

this would be a sample script.js that would work and should show the console.log:

import { buildRefs } from '@/assets/scripts/helpers.js'

export default function (el) {
  const refs = buildRefs(el)

  init()

  return () => {
    // on onmount
  }

  function init () {
    console.log('init section 👋🏻')
  }
}

4 replies

Iain-g Feb 14, 2025
Author

Hi @aaronmeder - just tried your js thank you but nothing happening, here's my functions.php:
`<?php

namespace Flynt\Components\SiteBanner;

use Flynt\Utils\Options;
use Flynt\FieldVariables;
use Timber\Timber;

Options::addGlobal('SiteBanner', [
[
'label' => __('Visibility', 'flynt'),
'name' => 'siteBannersActive',
'type' => 'true_false',
'ui' => 'yes',
'default' => 1,
'ui_on_text' => __('Show', 'flynt'),
'ui_off_text' => __('Hide', 'flynt'),
'instructions' => __('Affects all site banners', 'flynt'),
'message' => ''
],
[
'label' => __('Site banners', 'flynt'),
'name' => 'siteBanner',
'type' => 'repeater',
'collapsed' => 0,
'min' => 0,
'max' => 3,
'layout' => 'row',
'button_label' => 'Add Banner',
'instructions' => __('Site Banner message to display - keep it brief!', 'flynt'),
'conditional_logic' => [
[
[
'fieldPath' => 'siteBannersActive',
'operator' => '==',
'value' => '1'
]
]
],
'sub_fields' => [
[
[
'label' => __('Active', 'flynt'),
'name' => 'eachBannerActive',
'type' => 'true_false',
'ui' => 'yes',
'default' => 1,
'ui_on_text' => __('Show', 'flynt'),
'ui_off_text' => __('Hide', 'flynt'),
'instructions' => __('Affects this site banner only', 'flynt'),
],
[
'label' => __('Banner title', 'flynt'),
'name' => 'siteBannerTitle',
'type' => 'text',
'conditional_logic' => [
[
[
'fieldPath' => 'eachBannerActive',
'operator' => '==',
'value' => '1'
]
]
],
],
[
'label' => __('Banner sub-title', 'flynt'),
'name' => 'siteBannerSubtitle',
'type' => 'text',
'conditional_logic' => [
[
[
'fieldPath' => 'eachBannerActive',
'operator' => '==',
'value' => '1'
]
]
],
],
[
'label' => __('Link button', 'flynt'),
'name' => 'siteBannerLink',
'type' => 'link',
'return_format' => 'array',
'conditional_logic' => [
[
[
'fieldPath' => 'eachBannerActive',
'operator' => '==',
'value' => '1'
]
]
],
],
[
'label' => __('Link text', 'flynt'),
'name' => 'siteBannerLinkText',
'type' => 'text',
'conditional_logic' => [
[
[
'fieldPath' => 'eachBannerActive',
'operator' => '==',
'value' => '1'
]
]
],
],
]
]
],
], 'Site Banners');
`

aaronmeder Feb 14, 2025

Hey @Iain-g it seems to work for me. I've added it as a minimal / empty component like this:
https://github.com/aaronmeder/various-code/tree/main/Flynt-Components/SiteBanner

To test I've added it this the templates/_document.twig file directly inside the <body>:
{{ renderComponent('SiteBanner') }}

When I open the site it will show the "init SiteBanner 👋🏻" output in the browser console as expected.

You should also be doing that if you haven't:

Add a .env file to your theme directory that contains VITE_DEV_SERVER_HOST=http://yourlocalwpsite.test (adjust the domain to point to your local Wordpress site)
Either run npm run start (and keep running) or npm run build:production in the theme directory

Let me know if it works!
Aaron

Answer selected by Iain-g

Iain-g Feb 14, 2025
Author

Thank you @aaronmeder I'm an idiot - I was missing the flynt-component name="SiteBanner" from my index.twig - all working now, sorry to have wasted your time.

aaronmeder Feb 14, 2025

@Iain-g ah perfect, no worries - happy it was an easy one 🙌🏻

Btw for the future: it makes it easier to help to debug if you can share the code of the whole component.

Happy weekend!
Aaron

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Component script.js not compiling #591

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Custom Component script.js not compiling #591

Iain-g Feb 14, 2025

Replies: 1 comment · 4 replies

aaronmeder Feb 14, 2025

Iain-g Feb 14, 2025 Author

aaronmeder Feb 14, 2025

Iain-g Feb 14, 2025 Author

aaronmeder Feb 14, 2025

Iain-g
Feb 14, 2025

Replies: 1 comment 4 replies

aaronmeder
Feb 14, 2025

Iain-g Feb 14, 2025
Author

Iain-g Feb 14, 2025
Author