Integrating Javascript code in a DevPack Component

Elements Component Development
1

@dan or @ben I spent a bunch of time this morning with Mr. Bot trying to figure out how to get the JS code for my custom component integrated into a DevPack component. We encountered numerous issues that appear to require the assistance of the Big Guns.

All of the properties and the HTML code for the component work just fine, but the JS code never appears to be called. The file is loaded and is set up in the hooks.js file in the components file hierarchy.

Is there any way I can get some help on making this work?

2

i’ve also had problems adding JS code to my projects lately. after many tests (and asking the elementi-bot!), i now put my JS-code in a separate file, like Dan shows in his video.

maybe this way will help you …

3

You can include JS (and additional files) in the pack or on a per component basis.

Check the Docs:

  1. Component Assets
  2. Shared Assets

But, more importantly check the code on GitHub, it includes an example of both!

If you get stuck, post on here for help, and we’ll get it all working for you :slight_smile:

4

Yes, all of my JS code is already in a separate file, but the code is never being called.

5

@dan Yes, I already have the code in place for this, but the problem we encountered was that the {{assetPath}} appeared not to be returning the correct path to the asset, which is why the bot flagged it as a bug in our attempt to get this working.

Of course, because the path was incorrect, the JS code could not be found. It did appear as if the JS file was being loaded, though.

6

Did you include the JS code with or without <script> </script> in the JS file?
For me, it only works without it. Otherwise, the script doesn’t output anything.

7

@handshaper

instead of using “{{assetPath}}”, I always use the hardcoded way for the path.

Bildschirmfoto 2025-07-25 um 21.03.55
Bildschirmfoto 2025-07-25 um 21.03.551638Ă—324 63.5 KB

8

@Pegasus you don’t need to edit the site template, you can use Portal to add code into the head area.

That way you can make your component work when placing it in any site :slight_smile:

btw. You also shouldn’t be hard coding paths, this is almost ALWAYS a bad idea…

@handshaper I don’t think there is a bug in {{assetPath}} we use it ourselves, so I wonder if you’re not quite using it correctly… if you share code with us we can take a look and point you in the right direction :slight_smile:

9

@dan

however, if I instead use <script src="{{resourcePath}}/sonntagsButtons.js"></script>, my script also no longer works.

edit: ok. i have to use: <script src="{{page.resourcesPath}}/scripts/sonntagsbuttons.js"></script>

that’ works for me

10

@dan Here is the code in the hooks.js file.

const transformHook = (rw) => {
   const { preview } = rw.props;
   const { mode } = rw.project
   const { assetPath } = rw.component;

    // show preview if `preview` is true, or we are NOT in edit mode
    const showPreview = preview || mode !== 'edit';

   rw.setProps({
     showPreview, 
     assetPath
   });
};

exports.transformHook = transformHook;

This what is defined at the beginning of the index.html file.

<script src="{{assetPath}}/privacy-consent.js"></script>

The privacy-constent.js file is currently located in the component’s current directory.

CleanShot 2025-07-25 at 10.13.03@2x
CleanShot 2025-07-25 at 10.13.03@2x1570Ă—118 25.2 KB

I will have to move this eventually because the code is shared with the other component that is part of the pack. But for now I just want to get this one component working properly.

11

try: {{page.resourcesPath}}

12

Is there perhaps an explainer video about this? Honestly, half of the time I have no idea what I’m building with the help of the “elementi-bot” or how I manage to get it working at all.

i’m more the type to try, fail, learn, and then start all over again until it finally works somehow.

So a video on how to use that “portal feature” would be super helpful for someone like me!

13

Is this in place of the {{assetPath}}?

14

you probably need to put “page.” before assetPath.

<script src="{{assetPath}}/privacy-consent.js"></script>

try the following
<script src="{{page.assetPath}}/privacy-consent.js"></script>

that didn’t work for me
<script src="{{resourcePath}}/sonntagssuttons.js">

but this works
<script src="{{page.resourcesPath}}/scripts/sonntagsbuttons.js"></script>

15

I tried that and it did not work either. I hope someone can shed some light on this as it is very frustrating having everything working except the code that makes it all happen.

16

The code in the JS file DOES NOT use <script>.

Sorry some how the forum did not show the last piece of info above.

17

@dan I’m still having no luck getting this working, so I could really use some help to understand what is wrong that isn’t allowing the JS code to work.

18

@dan OK, because I was having no luck integrating a separate JS file I decided to go with a different approach. Instead, I added the code as a script inside the HTML code and then moved it to the appropriate location using the portal code.

So far, this approach seems to be working, so now I have a working DevPack for my privacy consent stuff. Yippee!

1 Like
19

it seems there is a bug when loading JavaScript files.

If I specify the path like this, the file isn’t loaded and doesn’t run:

<script src="{{page.resourcesPath}}/scripts/JavaScriptFileName.js"></script>

this one works

<script src="{{page.resourcesPath}}/scripts/javascriptfilename.js"></script>

However, if the script file name is written entirely in lowercase, it works without any issues.

Do .js file names always have to be lowercase? Or is there another reason for this behavior?

20

My filename was all lowercase, but it contains a hyphen. I wonder if that is the problem. I’ll have to test it today.