title: Angular 8 and Stripe.js V3's loadStripe: Module not found: Error: Can't resolve '@stripe/stripe-js/types/index'
body: <p>I'm using Stripe as a payment processor, and they provide a library that allows developers to create secure "elements" (credit card inputs and such).  To remain A-rated PCI compliant, the library they provide, Stripe.js, cannot be bundled: It must be included from their site: <a href="https://js.stripe.com/v3" rel="nofollow noreferrer">https://js.stripe.com/v3</a>.  As such, they provide a helper function, <code>loadStripe</code>, that can be used to dynamically include the aforementioned script.  (It just adds a <code>&lt;script&gt;</code> tag and waits until it's loaded under the hood.  Nothing fancy.)</p>
  
  <p><a href="https://github.com/stripe/stripe-js" rel="nofollow noreferrer">https://github.com/stripe/stripe-js</a></p>
  
  <p>I was able to install that library via NPM and get Stripe working in my Angular 8 project.  I made the <code>loadStripe</code> function a provider so that I can mock it out during testing.  Here's a slimmed-down version of what I'm doing.</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { loadStripe } from '@stripe/stripe-js';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],  
    imports: [
      BrowserModule,
    ],  
    providers: [
      {provide: loadStripe, useValue: loadStripe},
    ],  
    bootstrap: [
      AppComponent,
    ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>It works fine.  I can use <code>loadStripe</code> in my services and I can mock it out in my unit tests.  But when I try to do a <em>production</em> build (<code>ng build --prod</code>) I get a nasty, cryptic error.</p>
  
  <pre><code>ERROR in ./src/app/app.module.ngfactory.js
  Module not found: Error: Can't resolve '@stripe/stripe-js/types/index' in '/home/&lt;MY-USER&gt;/temp/test-stripe/src/app'
  resolve '@stripe/stripe-js/types/index' in '/home/&lt;MY-USER&gt;/temp/test-stripe/src/app'
    Parsed request is a module
    using description file: /home/&lt;MY-USER&gt;/temp/test-stripe/package.json (relative path: ./src/app)
      Field 'browser' doesn't contain a valid alias configuration
      resolve as module
        looking for modules in /home/&lt;MY-USER&gt;/temp/test-stripe/
          using description file: /home/&lt;MY-USER&gt;/temp/test-stripe/package.json (relative path: .)
            Field 'browser' doesn't contain a valid alias configuration
            using description file: /home/&lt;MY-USER&gt;/temp/test-stripe/package.json (relative path: ./@stripe/stripe-js/types/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.ts doesn't exist
              .tsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.tsx doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.js doesn't exist
              as directory
                /home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index doesn't exist
        /home/&lt;MY-USER&gt;/temp/test-stripe/src/app/node_modules doesn't exist or is not a directory
        /home/&lt;MY-USER&gt;/temp/test-stripe/src/node_modules doesn't exist or is not a directory
        /home/&lt;MY-USER&gt;/temp/node_modules doesn't exist or is not a directory
        /home/&lt;MY-USER&gt;/node_modules doesn't exist or is not a directory
        /home/node_modules doesn't exist or is not a directory
        /node_modules doesn't exist or is not a directory
        looking for modules in /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules
          using description file: /home/&lt;MY-USER&gt;/temp/test-stripe/package.json (relative path: ./node_modules)
            Field 'browser' doesn't contain a valid alias configuration
            using description file: /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/package.json (relative path: ./types/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.ts doesn't exist
              .tsx
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.tsx doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.js doesn't exist
              as directory
                /home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index doesn't exist
  [/home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.ts]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.tsx]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.mjs]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/@stripe/stripe-js/types/index.js]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/src/app/node_modules]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/src/node_modules]
  [/home/&lt;MY-USER&gt;/temp/node_modules]
  [/home/&lt;MY-USER&gt;/node_modules]
  [/home/node_modules]
  [/node_modules]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.ts]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.tsx]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.mjs]
  [/home/&lt;MY-USER&gt;/temp/test-stripe/node_modules/@stripe/stripe-js/types/index.js]
   @ ./src/app/app.module.ngfactory.js 13:0-52 14:2720-2733
   @ ./src/main.ts
   @ multi ./src/main.ts
  </code></pre>
  
  <p>I can provide a StackBlitz if needed, but the app referenced above is literally the default <code>ng new test-stripe</code> with <code>npm install @stripe/stripe-js@1.2.x</code>.</p>
  
  <p>FWIW, <code>ng build</code> and <code>ng serve</code> work as expected, it's just the prod build that fails.  If I remove the <code>loadStripe</code> provider the app builds (i.e. if I just import <code>loadStripe</code> in my services directly).</p>
  
  <p>Thanks for any assistance.</p>