0

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)

3 Answers 3

0

Have you tried this?

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

    var pymChild = new pym.Child();

  });
</script>
1
  • You seem to be missing .js at the end of your path in the config, if this works that could be the issue.
    – Ben Crook
    Commented Mar 22, 2019 at 17:01
0

For now I seem to have fixed the issue by changing the quotes in requirejs-config.js:

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

and in pym_child.phtml I've edited the file to:

<script>// <![CDATA[
     require(["jquery","pym"],function($,pym){
     $(document).ready(function(){
        var pymChild = new pym.Child();
     })
 });
    // ]]>
</script>

If I keep having issues I will let you know.

0

If third-party js is not working in your theme, you can try it by creating a custom module.

Please create a simple module and enable it.

Add the below content to in your module.

File path: <vendor_name>/<module_name>/view/<your_scope>/requirejs-config.js

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

Scope: adminhtml, frontend, or base, where you want to use it.

You can use it in a script tag or js file like

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

    # Use it now 

  });
</script>

You need to run setup upgrade and deploy commands & test it.

This way, I used third-party js in my module or project. It's working for me.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.