All geek questions in one place

Error resolving the path of ES6 modules

I am trying to use the new ES6 features in Chrome 60 (by enabling the Experimental web platform ). This is the structure of my project:

myproject ├── src | ├── mymodule.js | ├── dep1.js | ├── dep2.js | ├── dep3.js ├── pages ├── example ├── example1.html

This is my example1.html page:

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>E6 6 experiments</title> <script type="module" src="../../src/mymodule.js"></script> </head> <body> </body> </html>

I configured Http-Server :

 http-server /Users/myuser/myproject

So, I have a server that runs and maintains material (to avoid problems with CORS related to using the file:/// protocol). When I start Chrome and type in the address bar: localhost://pages/example/example1.html , I get this error:

 [Error] GET http://localhost:8080/src/dep1 [Error] GET http://localhost:8080/src/dep2 [Error] GET http://localhost:8080/src/dep3

Dependencies Not Downloaded

The "Developer Tools" window shows that mymodule.js is loaded correctly, but there are no dependencies, the path is incorrect. The mymodule.js file has these three lines at the beginning:

 import * as dep1 from "./dep1"; import * as dep2 from "./dep2"; import * as dep3 from "./dep3";

Remember that dep1.js , dep2.js and dep3.js are in the same place as mymodule.js .

I think mymodule.js loads resources perfectly, otherwise, if it depends on where the server has the root directory, it becomes complicated. What am I doing wrong here?

+1
source share
1 answer

As you can see in the log, the relative path is resolved correctly, the folder is expected. The problem is that your files are called dep1.js not dep1 (etc.). Add file extension:

 import * as dep1 from "./dep1.js"; import * as dep2 from "./dep2.js"; import * as dep3 from "./dep3.js";

Alternatively, you can configure your server to solve them automatically.

+4
source

Source: https://habr.com/ru/post/1271315/

More articles:


All Articles