3

I try to include external JS (fabric.js) in my custom module.

I try so many different way but still not getting success. i don't understand what i missing below is my code.

  1. Add external JS (fabric.js) under <Vendor>/<Module_Name>/view/<adminhtml>/web/js/fabric.js
  2. Create requirejs-config.js under <Vendor>/<Module_Name>/view/<adminhtml>/requirejs-config.js

Add following code to requirejs-config.js

/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

var config = {
 map: {
    '*': {            
        fabric: 'Namespace_Modulename/js/fabric'
    }
 }
};

I followed below link to achieve my thing but still not get success.

Any other way to include external JS.

Any help would be appreciated! Thanks.

Improve this question
8
  • Do you insert it in require or define function? Commented Oct 27, 2018 at 9:11
  • You should try this with shim instead of map. Commented Oct 27, 2018 at 9:13
  • @Ramkishan i already try with shim but no luck Commented Oct 27, 2018 at 9:15
  • @LucScu i am not understand what you are trying to say. Commented Oct 27, 2018 at 9:15
  • You need to initialize the javascript component, follow this doc devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/…. requirejs-config.js is not required, it is only used to set the requirejs settings. Commented Oct 27, 2018 at 9:16

2 Answers 2

Reset to default
1

You need to initialize the javascript component like described in documentation.

If you use the declarative notation using the <script type="text/x-magento-init" /> tag you have to add to your .phtml

<script type="text/x-magento-init">
{
    // components initialized without binding to an element
    "*": {
        "fabric": {} // the alias for "Namespace_Modulename/js/fabric" defined in requirejs-config.js
    }
}
</script>

That's it, your javascript component will be loaded.

Improve this answer
11
  • Thanks, I don't required phtml file, i want o get this value in `html file. Commented Oct 27, 2018 at 10:02
  • Do you read the documentation linked? Take a look to imperative notation. Commented Oct 27, 2018 at 10:06
  • Yes i read it and try it but in `html file it is not working. for your efforts +1 :) Commented Oct 27, 2018 at 10:19
  • thx, but what happen if you use <script> require([ 'fabric' ], function ($) { alert('xxx); }); ); </script> Commented Oct 27, 2018 at 10:47
  • nothing it's not alert or also not get any error in console. strange! Commented Oct 27, 2018 at 10:53
0

Your fabric.js should start something like this (if you don't need without jQuery):

  define([ 
       "jquery" 
    ],
    function($) {
        "use strict"; 

        // Here your custom code...
     console.log('Hello'); 

        });

Check this require js app example, js files always have define(

https://github.com/volojs/create-template/tree/master/www

Or if you use shim in your require config file: a shim automatically adds a wrapper around a JavaScript library that makes it AMD-compatible / RequireJS-friendly.

Improve this answer
1
  • Thanks for your replay, without adding this fabric js is working fine. Commented Oct 30, 2018 at 4:43

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.