Magento 2 Passing Php Variable to external js for custom theme

Question

I have created a custom theme in app/design/frontend/Vendor/Themename

In theme directory I have Themename/requirejs-config.js

var config = {
 deps: [
 "js/custom",
 ]
};

Themename/web/js/custom.js

require([
 'jquery'
], function ($) {
 console.log('adsa');
 console.log(config);
});

I have a phtml file included and I am passing php variable to external js

<script type="text/x-magento-init">
{
 "*": {
 "js/custom": {
 "contacturl": "<?php echo $block->getUrl("contact/index/post"); ?>"
 }
 }
}
</script>

This is the error I am getting Config is not defined.

enter image description here

I am in the developer mode What I tried

Cleared Cache

Cleared Var Directory

• kunj: please share your custom JS code and I presuming that you are trying to pass contacturl to custom JS.

Answer 1

I got this working using this

define([
 'jquery'
], function ($) {
 console.log('adsa');
 return function (config) {
 console.log(config.contacturl);
 }
});

Though I am not sure why its not working with require.

• jack: Hi, are you passing contacturl to custom js file? are you trying to call contacturl in custom.js? I want to do same can you tell me your purpouse of doing this?
• Amit Singh: Yes Jack I am passing the url to external js custom.js. The purpose for this is to use the url in js file generated by php.

Answer 2

Although the OP has the answer, but I want to emphasize one thing here:

define([
 'jquery'
], function ($) {
 console.log('adsa');
 return function (config) {
 console.log(config.contacturl);
 }
});

In the above snippet, it MUST be "define"

If you use "require", you won't get what you want. And it's very hard to debug because there is no error.

One more thing, you can name the variable "config" above anything you want. It doesn't have to be exact word "config".

It can be "data", "request", "abc", ...

And from this variable, you can get what you put in "text/x-magento-init"