2

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?

2 Answers 2

5

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
        }
    }
);
6
  • do I have to use a .phtml file? I'd much prefer to keep everything separate?
    – treyBake
    Dec 18, 2018 at 13:54
  • I can see your point. My answer is what I use and what I have been trained to use as well. Dec 18, 2018 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, 2018 at 14:14
  • didn't seem to work :s
    – treyBake
    Dec 18, 2018 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 Dec 18, 2018 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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