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
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:
- app/code/Vendor/Module/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
module: 'Vendor_module/js/main',
}
}
};
- 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
}
});
- 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 cacheclean var/view_preprocessed contentclean pub/static contentdeploy the static content : php bin/magento setup:static-content:deploy -f
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– treyBake2018年12月18日 13:54:50 +00:00Commented 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.Herve Tribouilloy– Herve Tribouilloy2018年12月18日 14:11:59 +00:00Commented 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– treyBake2018年12月18日 14:14:15 +00:00Commented Dec 18, 2018 at 14:14
-
didn't seem to work :streyBake– treyBake2018年12月18日 14:31:11 +00:00Commented 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 repoHerve Tribouilloy– Herve Tribouilloy2018年12月18日 15:05:45 +00:00Commented Dec 18, 2018 at 15:05
Explore related questions
See similar questions with these tags.