0

I want to use import in Javascript, but I cannot get it to work (Firefox 65.0.2 on Fedora 28).

I have this in my HTML:

<!DOCTYPE html>
<html>
   <head>
     <script src="js/App.js" type="module"></script>
      <script type="text/javascript">        
            $(function() {
                application = new App(true);
            });
        </script>
   </head>
</html>

and in my js/App.js:

import "js/Helpers.js"
class App {
    constructor(needsLogin) {
    }
}

with js/Helpers.js being

class Helpers {
}

but, when run, I get this error:

ReferenceError: App is not defined

I tried adding import above the new App() call, but that gives me

SyntaxError: import declarations may only appear at top level of a module

How can I import Helpers.js in my App.js ?

Bart Friederichs
  • 33,050
  • 15
  • 95
  • 195
  • in short, browsers don't support this yet. You need to use a tool like webpack and babel to make this work. – Chris Hawkes Mar 22 '19 at 15:38
  • @ChrisHawkes, but this says otherwise: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Bart Friederichs Mar 22 '19 at 15:39
  • Sorry, you are using the native way of loading. Yes this works, but you need to make sure the module you want to import is being exported. – Chris Hawkes Mar 22 '19 at 15:40

0 Answers0