0

I need all simple and in the same folder... These two scripts are running with node --experimental-modules test.mjs, working fine:

test.mjs:

import  myClass from './myClass.mjs';

const x = new myClass()
console.log(x.test)

myClass.mjs:

'use strict';
export default class MyClass { ... etc. ...}

But when using with browser, there are erros:

index.htm

<!DOCTYPE html>
<html>
<head>
    <script src="./myClass.mjs"></script>
    <script>
      const x = new myClass()
      console.log(x.test)
    </script>
</head>

<body> <p>My test page</p> </body> </html>

ERRORS:

  • SyntaxError: Unexpected token export
  • Uncaught ReferenceError: myClass is not defined

See also

Localhost not loading module complementar question.

Peter Krauss
  • 13,174
  • 24
  • 167
  • 304
  • 2
    Try adding `type="module"` to script tag. Also in your browser example you don't have to export class – Nenad Vracar Feb 10 '19 at 11:08
  • Also note that `"use strict";` is unnecessary in a module. Modules (like classes) are always strict. – T.J. Crowder Feb 10 '19 at 11:09
  • Hi @NenadVracar, thanks, good clue (!)... Now new error, *"Access to script at 'file:///....MyClass.mjs' from origin 'null' has been blocked by CORS policy: The response is invalid"* – Peter Krauss Feb 10 '19 at 11:11
  • The key, as Nenad said, is `type="module"`. But in the above, what you'd do is `` No need to have a `script` tag for `myClass.mjs` at all. – T.J. Crowder Feb 10 '19 at 11:11
  • 1
    @PeterKrauss - The problem there is you're loading the HTML file in the browser directly, instead of using HTTP. Some browsers disallow a lot of things from `file://` URLs. Use a local webserver instead. – T.J. Crowder Feb 10 '19 at 11:12
  • 1
    You can use a server or check how to run chrome with CORS disabled. – Nenad Vracar Feb 10 '19 at 11:13
  • Hi @T.J.Crowder thanks, yes, make sense. Moved to my `http://localhost/...`. Now the error is *"Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec"* – Peter Krauss Feb 10 '19 at 11:16
  • The problem is `.mjs`, you should use `js` for browser instead. – Nenad Vracar Feb 10 '19 at 11:28
  • @NenadVracar I resolved by a link `ln -s MyClass.mjs MyClass.js`... Now the only error is *"test.htm:11 Uncaught ReferenceError: MyClass is not defined*" – Peter Krauss Feb 10 '19 at 11:29
  • The way your code works for me is like this https://jsfiddle.net/nhtozpae/1/ – Nenad Vracar Feb 10 '19 at 11:31
  • @NenadVracar - Browsers don't care about the file extension **at all**. (But Node.js does.) – T.J. Crowder Feb 10 '19 at 12:01
  • 1
    @PeterKrauss - That's odd. You'll want to look at your web server documentation to see how to tell it to return a valid JavaScript MIME type (`application/javascript`) for `.mjs` files (if you're going to use `.mjs`). Re the error you got after linking: Your code imports the class as `myClass`, not `MyClass`. (Case matters. :-) ) (I'd suggest `import MyClass from "./myClass.mjs"` instead.) – T.J. Crowder Feb 10 '19 at 12:03
  • 1
    @T.J.Crowder, perfect, thanks for all! Well, better to delete or preserve this question? – Peter Krauss Feb 10 '19 at 13:21
  • @PeterKrauss - Glad that helped! You never know, someone doing a search may find your question and have it take them to the answer. Duplicates aren't necessarily a bad thing, they increase the search surface area. :-) – T.J. Crowder Feb 10 '19 at 13:27

0 Answers0