npm package import issue

PHPMaker General Discussion (PHPMaker)
1

This my first time to use npm package and I am beginner hereI am trying to search a name from the truecaller API
for it I have add the npm package “truecallerjs” from the Tools → npm Packagefrom the example of truecallerjs documents
I have added the following code under the
Client Script → Global → Startup Script

import truecallerjs, { SearchData, Format } from "truecallerjs";

async function performTruecallerSearch(): Promise<void> {
  const searchData: SearchData = {
    number: "9912345678",
    countryCode: "IN",
    installationId: "a1k07--Vgdfyvv_rftf5uuudhuhnkljyvvtfftjuhbuijbhug",
  };

  try {
    const response: Format = await truecallerjs.search(searchData);
    console.log(response.json());

    // Additional response methods:
    // console.log(response.xml());
    // console.log(response.yaml());
    // console.log(response.text());

    // Example of available data from the response:
    console.log(response.getName()); // "Sumith Emmadi"
    console.log(response.getAlternateName()); // "sumith"
    console.log(response.getAddresses()); // {....}
    console.log(response.getEmailId()); // example@domain.com
    console.log(response.getCountryDetails()); // {...}
  } catch (error) {
    console.error("Error occurred:", error);
  }
}

performTruecallerSearch();

When I check on the console I got an error as -
Uncaught SyntaxError: Cannot use import statement outside a module

2

You may read import.

3

Hi, I am also new to npm js packages and facing the same issue. I don’t know how to load and use it in phpmaker.could you please share an example if possible or share how you manage to call the library in phpmaker?

4
  1. You cannot use import in normal tag, so you cannot use it in Client Script or Startup Script.
  2. You may read import:
    In HTML, this is done by adding type=“module” to the tag.
  3. You may use Page_Head server event to add tag and add your code.
5

Thank you,

if possible could you please provide a simple example of any js npm package and show how to add it to a page and use it, cuz all Page_Head examples in the link you share are loading js files, and I can’t find the import exampleso if you can share a simple npm package to use what script do we need to use to import it in Page_Head and where to write the script to use the imported package?

6

arbei wrote:

You may use > Page_Head > server event to add > > tag and add your code.

You better try your hand at it first and post your code for discussion if your code does not work. Press F12 in your browser and check JavaScript errors in the Console panel.

7

here is an example of loading npm packages and using them. in this example, I am using SurveyJS to show a survey on a page viewfirst, add the following npm packages:--------------------------------------- Tools > npm packagesadd

survey-core   --> 1.9.100
survey-knockout-ui  --> 1.9.100
knockout  --> 4.2.1

--------------------------------------- Server Events > Global > All Pages > Page_HeadNote I tried to use import, but it didn’t work with me, if someone manages to use it please let me know and share your code, pleasethe following will work fine

<script type="text/javascript" src="../node_modules/knockout/build/output/knockout-latest.js"></script>
<link  href="../node_modules/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">

<script type="text/javascript"  src="../node_modules/survey-core/survey.core.min.js"></script>
<script type="text/javascript" src="../node_modules/survey-knockout-ui/survey-knockout-ui.min.js"></script>

--------------------------------------- Client Scripts > View Page > Client Script

Survey
    .StylesManager
    .applyTheme("defaultV2");

const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",
        type: "text"
    }, {
        name: "LastName",
        title: "Enter your last name:",
        type: "text"
    }]
};

const survey = new SurveyKnockout.Survey(surveyJson);
survey.focusFirstQuestionAutomatic = false;

function alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);
}
survey.onComplete.add(alertResults);

survey.render("surveyContainer");

--------------------------------------- Custom Template > View Page > Custom Template

<div id="surveyContainer"></div>

-------------------------------------------------------------------------please let me know if there is a better way to load the libraries

ihab

8

Note that not all npm packages can be used in browser, truecallerjs does not provide browser version so it cannot used in browser even you can try to use to load it. Survey.js supports browser so you can load the js for browser directly and normally.Also read npm Packages:
The npm packages will be installed under the node_modules folder, then you can use them in your project by including them with Scripts and Stylesheets.