Webpack: Can't resolve module (Stripe.js)

I've added Stripe.js script tag into my index.html:

<script type="text/javascript" src=""></script>

I'm getting this error message from webpack:

Module not found: Error: Can't resolve 'stripe'

As you can see, webpack is not able to resolve 'stripe' module. I import it using:

import 'stripe';

So, into my code I'm using Stripe keywork in order to get access to Stripe:

@Injectable()
export class SourceEffects {
  constructor() {
    Stripe.setPublishableKey("pk_test_Casd");
  }
}

Everything seems to work (VSCODE diesn't warning me about anything). Nevertheless, when I'm trying to run webpack I'm getting above error.

Any ideas?

EDIT

So, in short:

  1. I'm using @types/stripe.
  2. I'm importing it into typescript code using import 'stripe'.
  3. webpack is getting me a can't resolve stripe module.


ANSWERS:


I don't know how you get type information for the client side Stripe.js but if you're just trying to get up and running, you can do the following:

export class SourceEffects {
  constructor() {
    let Stripe: any = (window as <any>).Stripe;
    Stripe.setPublishableKey("pk_test_Casd");
  }
}

Basically, the script tag for Stripe.js adds a Stripe object to the window object, so just take the object from there and just turn off the type checking for that API. If you want typing information for the client-side Stripe.js, you'll have to look around for it (or write it yourself). But the use of any will turn off type checking for Stripe.

See this blog post for a full example.

PS. You still need to remove the import 'stripe' line.

EDIT: Why Your Solution Doesn't Work

- I'm using @types/stripe. This is solely for the typescript compiler to get the type definitions for the node module 'stripe'. This is not used to run your application, which is why you are supposed to only add it to your devDependencies

- I'm importing it into typescript code using import 'stripe'. import 'stripe' is an instruction to webpack to find the module 'stripe' in your node_modules. You don't have that module - you're not using the node library stripe.

- webpack is getting me a can't resolve stripe module. Since you don't have 'stripe' listed in your package.json (and installed) as a library you are using, webpack can't find it when it tries to load it.



 MORE:


 ? How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?
 ? How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?
 ? How to setup Webpack with Angular 1.x and Typescript to use Angular Templates (ng-include)?
 ? Webpack: using require for ng-include
 ? Include an angular template in another using webpack
 ? Webpack, Angular 2.0 using typescript, and Django setup
 ? Importing npm linked React JSX project/modules into AngularJS TypeScript module not working
 ? How to create an "external module" typescript definition file to include with an npm package?
 ? Getting errors: How can I properly consume my transpiled and typed typescript npm module from typescript?
 ? How to use Namespace Typescript properly with Wepback