How to import js file as module in typescript

Question

I am working with SPFx framework in SharePoint, which will have typescript files. I am using SPServices.js and app.js (custom js file) in my application. In config.json file I am using like below:

"externals": {
    "jQuery":{
      "path":"node_modules/jquery/dist/jquery.min.js",
      "globalName": "jQuery1"
    },
    "AppScript":{
      "path":"/src/webparts/calendarEvents/app.js",
      "globalName": "AppScript",
      "globalDependencies": [
        "jQuery",
        "SPServices"      
      ]
    },
    "SPServices": {  
      "path": "/src/webparts/calendarEvents/jquery.SPServices.min.js",  
      "globalName": "SPServices" ,
      "globalDependencies": [
        "jQuery"
      ] 
    }
}

If I use below syntax it is working in my .ts file

require('SPServices')
require('AppScript')

But instead of above syntax i would like to import them as object so that I can access the functions inside of those files. Inorder to do that I am using as

import * as SPServices from 'SPServices';
import * as myScript from 'AppScript';

But these are not working. It is giving error.

Resource "SPServices" not found in loader configuration of manifest for component "b052328a-ad75-4056-af7f-7bc8b3e795fc" (CalendarEventsWebPart)

But strangely it same line import * as SPServices from 'SPServices'; is working fine in another .ts file. There it is not giving any such error. I am really confused what was wrong here.

Why too many confusions while adding files to typescripts like js, css files?

score 0 · Answer 1 · answered Dec 22 '17 at 15:31

SPServices was written before CommonJS modules were used to import functionality. It works by extending jQuery. Try this instead:

import * as jQuery from 'jQuery';
require('SPServices');

$().SPServices.doStuff();

See the Microsoft docs section Loading a library that has a dependency on another library for more info on this use case.

How to import js file as module in typescript

1 Answers1