2

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.

8
  • Do you insert it in require or define function?
    – LucScu
    Oct 27, 2018 at 9:11
  • You should try this with shim instead of map. Oct 27, 2018 at 9:13
  • @Ramkishan i already try with shim but no luck Oct 27, 2018 at 9:15
  • @LucScu i am not understand what you are trying to say. 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.
    – LucScu
    Oct 27, 2018 at 9:16

2 Answers 2

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.

11
  • Thanks, I don't required phtml file, i want o get this value in `html file. Oct 27, 2018 at 10:02
  • Do you read the documentation linked? Take a look to imperative notation.
    – LucScu
    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 :) Oct 27, 2018 at 10:19
  • thx, but what happen if you use <script> require([ 'fabric' ], function ($) { alert('xxx); }); ); </script>
    – LucScu
    Oct 27, 2018 at 10:47
  • nothing it's not alert or also not get any error in console. strange! 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.

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

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.