npm package import issue

[thomas]

This my first time to use npm package and I am beginner here

I am trying to search a name from the truecaller API
for it I have add the npm package "truecallerjs" from the Tools -> npm Package

from 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

[arbei]

You may read import.

[ihab]

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?

[arbei]

1. You cannot use import in normal <script> 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 <script> tag.
3. You may use Page_Head server event to add <script type="module"> tag and add your code.

[ihab]

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 example

so 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?

[arbei]

arbei wrote:

You may use Page_Head server event to add <script type="module"> 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.

[ihab]

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 view

first, add the following npm packages:

--------------------------------------- Tools > npm packages

add

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

--------------------------------------- Server Events > Global > All Pages > Page_Head

Note 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, please

the 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

[arbei]

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 <script type="module"> 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.