0

I've been following a few guides online about adding a JS file to a module but it seems to be going awry for a reason I can't figure out.

My JS is a simple file:

define([
    'jquery',
    'underscore',
    'mage/template',
],
function($, _, template)
{
    'use strict';
    console.log('hello world');
})

I've been trying to add via my requirejs-config.js file:

var config = {
    deps: [
        'js/main'
    ]
};

Path to my main.js file is web/js, I then run the usual compile, upgrade, deploy, cache:flush functions in CLI afterwards but when I go to my frontend page - nothing in console and my main.js file isn't in the <head> element.

What am I doing wrong?

Edit: full file structure for clarity

|-Vendor
|-----Module
|---------Block
|-------------Garage.php
|---------Controller
|-------------Customer
|-----------------Index.php
|---------etc
|-------------frontend
|-----------------routes.xml
|-------------module.xml
|---------registration.php
|---------requirejs-config.js
|---------view
|-------------frontend
|-----------------layout
|---------------------customer_account.xml
|---------------------default_head_blocks.xml
|---------------------garage_customer_index.xml
|-----------------templates
|---------------------garage.phtml
|---------web
|-------------js
|-----------------main.js

Edit: my default_head_blocks.xml file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Vendor_Module::js/main.js" />
    </head>
</page>

Edit: I've run the above commands (post-updates):

$ php bin/magento setup:upgrade
$ php bin/magento setup:di:compile
$ php bin/magento setup:static-content:deploy -f
$ php bin/magento cache:flush
$ chown -R www-data:www-data var/ && chmod -R 777 var/
$ chown -R www-data:www-data pub/ && chmod -R 777 pub/
$ chown -R www-data:www-data generated/ && chmod -R 777 generated/

This renders the JS path as http://site.local/static/version1544529237/frontend/Theme/default/en_US/Vendor_Module/js/main.js - which 404s.

  • do you want to add your js file in html head right ? – Aasim Goriya Dec 11 '18 at 11:29
  • @treyBake Do you want to include any custom JS file (like filename.js) or you want to execute JS code in a Phtml file? Please confirm. – Pritam Info 24 Dec 11 '18 at 11:29
  • @PritamInfo24 there is no js in the phtml file - want to keep js in js and php/html in phtml – treyBake Dec 11 '18 at 11:29
  • @AasimGoriya yeah essentially – treyBake Dec 11 '18 at 11:30
  • @treyBake Please check your main.js path it must be at app/code/Vendor/Module/view/frontend/web/js/main.js – Prince Patel Dec 12 '18 at 6:41
0

You can add js file in your html head by adding following code in your custom module's default.xml file

And put your js file in your module app/code/Vendor/Module/view/web/js/ directory

In your : app/code/Vendor/Module/view/frontend/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
       <script src="Vendor_Module::js/main.js" />
    </head>
</page>
  • do I have to do via theme or can I not bundle in the module? Seems a bit counter-developer to have to include module js via a theme? – treyBake Dec 11 '18 at 11:34
  • Yeah - check title :) – treyBake Dec 11 '18 at 11:35
  • Please check my updated ans – Aasim Goriya Dec 11 '18 at 11:37
  • It kinda works ... it's adding the url as: http://site.local/static/version1544528204/frontend/Theme/default/en_US/Vendor_Module/js/main.js - which obvs 404s as Vendor_Module doesn't exist within the theme ... :s – treyBake Dec 11 '18 at 11:40
  • add your module name instead Vendor_Module, I have added this for testing purpose – Aasim Goriya Dec 11 '18 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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