Page 1 of 1
npm package import issue
Posted: Thu Nov 16, 2023 10:52 am
by 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
Re: npm package import issue
Posted: Thu Nov 16, 2023 10:22 pm
by arbei
Re: npm package import issue
Posted: Tue Jul 02, 2024 10:45 pm
by 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?
Re: npm package import issue
Posted: Wed Jul 03, 2024 10:06 am
by arbei
- You cannot use
import
in normal <script> tag, so you cannot use it in Client Script or Startup Script.
- You may read import:
In HTML, this is done by adding type="module" to the <script> tag.
- You may use Page_Head server event to add
<script type="module">
tag and add your code.
Re: npm package import issue
Posted: Wed Jul 03, 2024 10:11 pm
by 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?
Re: npm package import issue
Posted: Wed Jul 03, 2024 10:20 pm
by 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.
Re: npm package import issue
Posted: Fri Jul 05, 2024 11:47 pm
by 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:
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
Re: npm package import issue
Posted: Tue Jul 09, 2024 9:59 am
by 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.