Importing remote files via ES6 import

Question

I have an ES6 React app thats being compiled and bundled via browserify.

I have several import statements like:

import React from 'react/addons'

I also need to use an external library that creates an HTML widget, hosted on a CDN. I've tried including the file before or after the bundle source:

<script src="//cdn.auth0.com/js/lock-7.9.min.js"></script>
<script type="text/javascript" src="scripts/build.js"></script>

When I try and reference the CDN provided object in the console, it works fine:

Auth0Lock
<-function Auth0Lock()...

Referencing it within the React app raises a syntax error. I assume I need to import it...but how?

Answer 1

You can install auth0-lock via npm, and use it as a local dependency

npm install auth0-lock --save

and then import it to your app like this

import Auth0Lock from 'auth0-lock';