How to start unraveling the magic of 3rd party libs when they aren't working?

Ionic Framework ionic-v3
1

Hi,

I’ve got a 3rd party lib I’m trying to use. I’ve installed the library with npm and I’ve installed the types to go with it.

It seems for this particular library I don’t have to write an import statement, it just seems to work and intellisense in VS Code is picking it up.

But then at runtime it can’t be found. If I do put an import statement in, it doesn’t make a difference…

Other 3rd party libs are different, they seem to get bundled with the app and require an import statement.

It all just looks like magic to me, and when the magic doesn’t work I have no idea what to do…

Is there a way to point rollup towards the js file and get it to bundle it with everything else?. How does rollup know what to bundle with 3rd party libs anyway? It just seems to magically find everything in the node_modules directory and pick the right js file in there?

I have no idea how for some libs how on earth they end up working and other ones don’t?

Is there anywhere I can start?

I guess what I want to try and avoid is sticking script tags all through the html file for 3rd party libs, then having another build script which copies them to the www folder. But it makes more sense to me than this huge mess of conventions that when it beraks I don’t know what is going on…

Any help and pointers appreciated!

2

Or is it using webpack?. or both?.. It’s seriously like an iceberg!

3

The way that Rollup (and Webpack) works is that it starts from an entry point, main.ts, and goes through all the imports (main.ts imports app.modules.ts, which imports other libraries and your components, and so on). So you really need to import that library in order for it to be included in the final bundle. Can you tell us which library you’re having trouble with?

4

Thanks for taking the time to reply :slight_smile:

I’m using big.js.

And the typings

https://www.npmjs.com/package/@types/big.js

There is this at the end of the big.js lib. Does that mean anything?

Are there some good resources that you know of to summarise all of this stuff so I can start to navigate it?

//AMD.
if (typeof define === 'function' && define.amd) {
    define(function () {
        return Big;
    });

// Node and other CommonJS-like environments that support module.exports.
} else if (typeof module !== 'undefined' && module.exports) {
    module.exports = Big;

//Browser.
} else {
    global.Big = Big;
}
5

That’s the part that applies to your environment. Try importing it as:

import Big from "big.js"

in the file/component where you want to use it

1 Like
6

Thanks @frontweb! It worked!. I was getting confused because without the import statement the compiler wasn’t giving any errors, and it didn’t seem to matter what I put in the import, it would allow any value and everything would function as it should.

But putting as you have said, it’s now included big.js into the javascript bundle and doesn’t give me any runtime errors.

Thank you!