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

Your Answer

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

Browse other questions tagged or ask your own question.