4

I am trying to make simple example of vanilla ES import export.

index.js 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="module" src="main.js"></script>
</head>
<body>

</body>
</html>

main.js

import {foo} from './mathModule';

console.log(foo);

mathModule.js

export const foo = Math.sqrt(2);

when I run this page I get an error

main.js:1 GET http://[page].net/test/mathModule 404 (Not Found)

EDIT: project structure

  • test
    • index.html
    • main.js
    • mathModule.js
tprieboj
  • 1,680
  • 6
  • 31
  • 54

2 Answers2

7

import needs a fully qualified URL. You can't leave off the extension unless the absolute URL doesn't have an extension on it.

So judging by your examples use:

import {foo} from './mathModule.js';

As Nimeshka Srimal caught, it looks like the extension requirement varies between implementations. Firefox is appending .js automatically, but Chrome and Safari expect the actual address.

I'm looking at the spec, 15.2.2 Imports, and there doesn't seem to be any specification on whether the implementer should append the extension automatically or not.

Additionally, as ASDFGerte pointed out from the MDN docs on import:

The module to import from. This is often a relative or absolute path name to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.

zero298
  • 25,467
  • 10
  • 75
  • 100
  • No, the given code works fine in my localhost without the extension. – Nimeshka Srimal Jul 17 '18 at 17:41
  • this works (my habit from TypeScript to import files without extension) thanks ! – tprieboj Jul 17 '18 at 17:42
  • @NimeshkaSrimal I'm almost positive that this is the case because I just created a tiny project to test whether the extension matters. – zero298 Jul 17 '18 at 17:48
  • @zero298It might be the case, but it works fine in FF (61.0.1). So I believe it's a browser issue? – Nimeshka Srimal Jul 17 '18 at 17:50
  • @NimeshkaSrimal You're right. I just tried in FF and it appended the extension automatically. I'll add that caveat to the answer. – zero298 Jul 17 '18 at 17:51
  • Judging from [this answer](https://stackoverflow.com/questions/44481851/does-es6-import-export-need-js-extension/44510307#44510307), it shouldn't work without extension usually (if the file has one). On my FF, when reading from files, i also have it working when supplying the extension, while it gives some ominous cors issue when not adding the extension (which it also gives when using a non-existing file). I vaguely remember it always interprets the file as javascript, even if there is no extension on it, but would have to read about that again aswell. – ASDFGerte Jul 17 '18 at 18:36
  • @ASDFGerte Well, appending ".js" and actually interpreting it as JS are 2 different things. I can take an image at `http://www.example.com/pretty-lake.js` and *try* to interpret it as JS, just like I can try to interpret `http://www.example.com/inverse-square.png` as an image. The thing is that automatically appending ".js" is the difference between a 404 and a 200 response code. I think it's very strange that the extension is being added automatically. – zero298 Jul 17 '18 at 18:40
  • As said, for local files, my FF required the proper filename aswell. – ASDFGerte Jul 17 '18 at 18:42
0

The simplest would be to remove the export and import expressions since you're already including both files in your html.

const foo = Math.sqrt(2) // mathModule.js
console.log(foo) // main.js
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="mathmodule.js"></script>
  <script src="main.js"></script>
</head>
<body>

</body>
</html>

If you are using node or something similar to run the script, maybe you should use a transpiler such as babel. Import and Export are "new" javascript features hence they're not implemented in most browsers

Kary Mont
  • 58
  • 9
  • Not sure what you're looking at, but the current version of all major growers support modules. And that's aside from the fact that the simplification is specific to the example provided, and not a general solution. There are many benefits to using modules. – jhpratt Jul 17 '18 at 17:59