2

I've been researching this for weeks and have spent hours on this the last two days, but I cannot find a proper answer.

I've read several times that the latest Chrome versions support ECMAScript 6 and that they support import/export statements.

So why is my below script returning an error?

Error:

index.js:1 Uncaught SyntaxError: Unexpected token {

My code:

// Player.js
export class Player {
  constructor() {
    this.name = 'TestPlayer2';
  }
}

// index.js
import { Player } from './Player.js';
let MyPlayer = new Player();
window.alert(MyPlayer.name);

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Import Test</title>
</head>
<body>
Test
<script type="text/javascript" src="index.js"></script>
</body>
</html>

Do recent browsers not support these import and export statements?
Did they ever?
Why is every EMCAScript 6 topic/blog/post saying recent browsers support this?
Is there another import/export format that browsers do support?
I don't mind having to add the source Player.js source file in my index.html, but I also need the Player.js file on my node.js server where I'll have to use import/export.

Edit: I've rewritten the question after people suggested using tools like webpack. I got this working with webpack, but I'd like to understand why this is not working as is, since I've read everywhere that browsers do support this.

I probably will be using webpack to compile my files into one big file.
I'm now just interested in knowing why and how this (doesn't) work.

  • Node.js doesn't support ES modules (it does behind a flag but it's not dfinished). It only supports CommonJS, module/require style. Some browsers now support ES modules, but they don't support CommonJS. You have to use something like [browserify](https://browserify.org) to bundle CommonJS files and their dependencies into a single script file you can use in the browser. – goto-bus-stop Jul 17 '18 at 16:52
  • I have no idea what any of that means ... –  Jul 17 '18 at 16:54
  • @goto-bus-stop Can I use browserify on both my server and client? They do have different dependencies, but it looks like it will just go through all my files and pick up the dependencies that are declared inside of them? –  Jul 17 '18 at 17:11
  • `Why is this so damn complicated in JS?` because JS has to work on a few different browsers with a few hundred different versions. – Jonas Wilms Jul 17 '18 at 17:18
  • @JonasW. Not even just browsers, varying engines (node, Rhino, etc) as well. – zero298 Jul 17 '18 at 17:27
  • It would be fine if I could just get it to work on my Node JS server, but then my client-side throws an error on the export statements ... If I can prevent that, I can just load the required files manually in the HTML document for the client side. –  Jul 17 '18 at 17:38
  • Change your `type="text/javascript"`in your `script` tag to `type="module"`. That fixed it for me when I had the same problem. – CodeF0x Jul 18 '18 at 13:09

2 Answers2

1

Why is this so damn complicated in JS?

Javascript is still a very young language and it has to work on various engines across different versions, so it takes very long for new language features to get supported everywhere. Its more than three years ago that eople decided that modules would be useful in JS and added it to the language, but most browsers do not support it yet and Nodejs just rolled out a Beta that supports it. So until you can use modules in Production it will take a few Years.

Up to then you have to produce code without modules, which means copy + pasting all your code into the frontend.js and the backend.js. As that is too much work, there is Webpack, which allows you to do exactly that. Just write your code with imports and exports, then use Webpack to generate a frontend and a backend bundle.

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • I got this working with webpack, would still like to know why it doesn't work by default, especially with all info on the subject saying recent browsers do support this. –  Jul 18 '18 at 09:26
  • @pascal ask some of your friends / family members which chrome version they use. Probably most of them haven't updated it since years – Jonas Wilms Jul 18 '18 at 09:30
  • I don't care ... I'm not trying to support older browsers. But it's not working in my browser either, which is the latest version of Chrome ... (Also tried in Firefox, same error) –  Jul 18 '18 at 09:39
  • @pascal yeah well you have to serve all the js files with your serverside code (and in some browsers it might be just in beta yet) – Jonas Wilms Jul 18 '18 at 09:42
  • https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file?rq=1 That topic states in the accepted answer that is upvoted 3000+ times that Chrome 61 supports this, but it is clearly not working? –  Jul 18 '18 at 09:48
0

Es6 modules are supported in the latest version of chrome. You should be using the import statement not the require one.

If you need to get it done and not bother try webpack. Webpack can get little complicated in the beginning, you can try parcel which is an alternative to webpack and supports module loading in the browser side and there is less configuration to get it done.

https://parceljs.org/assets.html

Gigarthan
  • 247
  • 1
  • 11
  • 1
    if you are using the native method then you need to add a script tag pointing to your root js file. . You should be running it on a static web server otherwise module loading won't work. – Gigarthan Jul 17 '18 at 17:39
  • All I had to change for this to work was: - Didn't notice this since it makes no sense to me at all. –  Jul 19 '18 at 08:39