juwiley juwiley - 1 year ago 254
Javascript Question

Importing remote files via ES6 import

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:

<-function Auth0Lock()...

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

Answer Source

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';