using external library into typescript and webpack project

Question

I've been really very stuck for some weeks trying to solve that, I'm really suach a exhausted man...

Up to now, and according to this guide:

npm install stripe --save
npm install @types/stripe --save-dev

and I've added this in to webpack.common.js:

new webpack.ProvidePlugin({
    Stripe: 'stripe'
})

Then, into my typescript component I've added this:

import * as Stripe from '@types/stripe';

Nevertheless I'm getting this error:

[ts] File '.../node_modules/@types/stripe/index.d.ts' is not a module.

I've also tried:

import stripePackage from 'stripe';

But I'm getting the same message:

[ts] File '.../node_modules/@types/stripe/index.d.ts' is not a module.

EXTENSION

By now, I've uninstalled @types/stripe and I've added the script cdn reference on index.html:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

By other side, I've also added the reference into my typescript:

import * as Stripe from 'stripe';

I'm using VSCode in order to develop my typescript project. It's magic for me VSCode is available to give methods on Stripe object.
- How does VSCode know where stripe is located? (Remember I've only added a <script type=...> tag into index.html. It's something magic for me.
- How does webpack or typescript create the link between <script> tag reference into my typescript code? I'm not able to figure out how it's provided...

Compiler tells me nothing now. But, how should I use defined types into 'stripe'? — Jordi
– Jordi, Commented Mar 22, 2017 at 12:38
I've just realized, I'm able to use Stripe straightforwardly. Which are the issues I'm not able to use import * as Stripe from '@types/stripe' or import * as Stripe from 'stripe'...? — Jordi
– Jordi, Commented Mar 22, 2017 at 12:41
@types are just type definitions. This is not a library you can import. It depends on how the package is written, but if you just have a script tag in your index.html, and the @types installed, there is no need for an import in typescript anymore — Poul Kruijt
– Poul Kruijt, Commented Mar 22, 2017 at 12:58

Michael Jungo · Accepted Answer · 2017-03-22 14:21:41Z

1

According to the GitHub issue Feature requests: Typescript definitions #296 the type definitions of @types/stripe are outdated. The stripe/index.d.ts says they are for Stripe 2.x, but the current version of Stripe on npm is 4.15.1.

For now you'll have to live without type definitions, uninstall @types/stripe with:

npm uninstall @types/stripe --save-dev

You always have to import the module itself, not the type definitions. So it is:

import * as Strip from 'stripe';

Also the webpack.ProvidePlugin is only used for legacy modules that depend on a module being available globally and webpack will simply add the import to each module that tries to use that global. See Shimming. If you're just using it in your own code, you can leave off the ProvidePlugin.

Note: Stripe on npm is for server side bindings only, you can't bundle them into an app for a browser.

edited Mar 22, 2017 at 14:21

answered Mar 22, 2017 at 13:57

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordi Over a year ago

Thanks @Michael. I've added some related issues has came up trying to handle it with your approach on post. Could you give me some lights please? (I'm using stripe in browser)

Michael Jungo Over a year ago

I don't really know anything about stripe. But you can you include the stripe script in a <script> tag in your HTML and use the global Stripe. You might be interested in looking at a similar question Stripe with React JS.

Collectives™ on Stack Overflow

using external library into typescript and webpack project

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related