Magento – Loading external JS using requireJS in Magento2

magento2requirejs

Following this answer I try to add an external JS file named Pym.js to my Magento 2.3 shop.

I've tried several things but can not get it to work. My current setup it:

app/design/frontend/vendor/theme/requirejs-config.js

var config = {
  "paths": {
    "pym": "https://pym.nprapps.org/pym.v1"
  }
};

app/design/frontend/vendor/theme/Magento_Theme/default_head_blocks.xml

<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="pym_child" template="Magento_Theme::js/pym_child.phtml"/>
    </referenceContainer>
</page>

app/design/frontend/vendor/theme/Magento_Theme/templates/js/pym_child.phtml

<script type="text/javascript">
  require([
    "pym"
  ], function () {

    var pymChild = new pym.Child();

  });
</script>

The error I keep getting is

Uncaught ReferenceError: pym is not defined
at Object.execCb (require.js:1650)
at Module.check (require.js:866)
at Module. (require.js:1113)
at require.js:132
at require.js:1156
at each (require.js:57)
at Module.emit (require.js:1155)
at Module.check (require.js:917)
at Module.enable (require.js:1143)

Best Answer

Have you tried this?

<script type="text/javascript">
  require([
    "https://pym.nprapps.org/pym.v1.js"
  ], function () {

    var pymChild = new pym.Child();

  });
</script>

Related Solutions

Magento2 RequireJS – Load Tether Before Bootstrap v4

This is quite large to post in comments, i have created one extension where i added some javascript and jquery file like mentioned.

Add your files to requirejs-config.js like

var config = {
    map: {
        '*': {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
        }
    }
};

Once it is done clear cache and php magento setup:static-content:deploy go to \pub\static\_requirejs\frontend\Magento\luma\en_US\requirejs-config.js check your configuration files, if not find, remove the file and refresh the browser , it will generate automatically. once you find your file paths there. you can write code in phtml

     require(['jquery', 'tether', 'bootstrap'], function($){ 
         //check with alert once if works fine then you can go
        $(function() {
            $('[data-toggle="tooltip"]').tooltip()
        });
 });

Using require() you are saying something like "the function that I pass has the following dependencies, check that these dependencies are loaded before running it".

Hope this helps.

Magento – how to load or add js before require js in magento 2

To load custom js before require.js than add custom js in below XML path

app\design\frontend\Enterprise\Orange\Magento_Theme\layout\override\base\default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                            <link src="js/customercookie.js"/>
                            <link src="js/customercookie.js"/>
                            <link src="Orange_Webform::js/mnpform.js"/>
    <css src="mage/calendar.css"/>
    <css src="common-header/css/custom.css"/>
                            <script src="shm/shm.js"/>
                            <script src="common-header/js/custom.js"/>
    <script src="requirejs/require.js"/>
  </head>
  <body>
    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Theme::js/components.phtml" before="-"/>
    </referenceContainer>
  </body>
</page>

Related Topic