1

I've tried adding my module JS file to Magento2 but for whatever reason it seems to return this error:

Error: Mismatched anonymous define() module: function($)

My view/frontend file structure:

|-frontend
|-----layout
|---------default_head_blocks.xml
|-----requirejs-config.js
|-----templates
|---------helloworld.phtml
|-----web
|---------js
|-------------main.js

requirejs-config.js

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

web/js/main.js

define(
    ['jquery'],
    function($)
    {
        "use strict";
        console.log('hello world');
    }
);

layout/default_head_blocks.xml

<?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="js/main.js" />
    </head>
</page>

What am I doing wrong in including my JS?

1

What are you doing wrong by including your JS is that your js file main.js, you should declare it in requirejs-config.js and not in default_head_blocks.xml

Here is a full exemple:

  1. app/code/Vendor/Module/view/frontend/requirejs-config.js
var config = {
    map: {
        '*': {
            module: 'Vendor_module/js/main',
        }
    }
};
  1. app/code/Vendor/Module/view/frontend/web/js/main.js
define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello myscript');
           //put all your mainjs code here
       }
});
  1. app/code/Vendor/Module/view/frontend/templates/file.phtml
<script type="text/javascript">
    require(['jquery', 'module'], function($, myscript) {
        myscript();
    });
</script>

Don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content : php bin/magento setup:static-content:deploy -f

0

First thing, add the js, you may use a template phtml (using layout file)

To load the javascript on every page, place the template on a layout file that is loaded on all pages.

the phtml template may be like the below

<script type="text/x-magento-init">
    {
      "*": {
          "module_name/js/main":{
              "base_url":"<?=$block->getBaseUrl(); ?>"
          }
      }
    }
</script>

the above snippet will load you javascript file once your file is in web/js module folder

then I would change your js from

define(
    ['jquery'],
    function($)
    {
        "use strict";
        console.log('hello world');
    }
);

to

define(
    ['jquery'],
    function($)
    {
        "use strict";
        console.log('hello world');

        return function(config, element) {
          console.log('hello world inside for instance');
          // here you can see the base_url from your js snippet and the dom element is #example
        }
    }
);
  • do I have to use a .phtml file? I'd much prefer to keep everything separate? – treyBake Dec 18 '18 at 13:54
  • I can see your point. My answer is what I use and what I have been trained to use as well. – Herve Tribouilloy Dec 18 '18 at 14:11
  • Just feels .. a bad practice? Not sure .. I know outside of M2 mixing JS + PHP is seen as something you should avoid, but M1 + M2 seem to use this practice a lot ... I'll change my code as suggested but if a method comes along that allows separation of JS + PHP I will probs opt for that :) – treyBake Dec 18 '18 at 14:14
  • didn't seem to work :s – treyBake Dec 18 '18 at 14:31
  • I have this public repository (see bitbucket.org/magstaging/punchhole/src/master) showing an example of js file.. it uses ui component but the script that I give above should work just as well insipring you from this repo – Herve Tribouilloy Dec 18 '18 at 15:05

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.