Modules pattern ES6 - browser can't find a file path

#1

hi guys,
I used modules in my project, but when I run it in the browser, there appear errors:
GET http://127.0.0.1:5500/v2.3/classes/Person net::ERR_ABORTED 404 (Not Found)
GET http://127.0.0.1:5500/v2.3/classes/UI net::ERR_ABORTED 404 (Not Found)

There is some error in files path? I mention that index.html is in the same folder, like main.js that contains imported modules Person and UI.

main.js

import Person from './classes/Person';
import UI from './classes/UI';

index.html

 <script type = "module" src="main.js"></script>
 <script src="popup/popup.js"></script>

The file structure

screenshot_20190920_234820
screenshot_20190920_234820181Ă—566 16.4 KB

#2

Try adding the file extension to the imports (Person.js).

What errors are you getting in VS Code? The red colors would suggest something else is possibly wrong.

1 Like
#3

Wow! That works! I thought about it before, but Linter always gets an error "Unexpected use of file extension “js” for “./modules/UI.js” ". For that reason, I was sure that the path doesn’t require an extension…

These errors come from Linter. Objects like alert or document are not defined for it.

#4

The linter is designed for webpack and similar. Unless you can configure your webserver backend to serve up JS files without a suffix (it’s a trivial rewrite rule), you’ll need to use the suffix in your import statements.

ES6 modules in the browser are a neat idea, but there’s way too many deployment problems right now for them to be practical. Most people don’t want to wait for their web browser to do the equivalent of npm install when they visit a new site, so until they get the dependency management nailed (even caching isn’t enough for this), webpack and company will continue to dominate.

#5

ES6 modules in the browser are a neat idea, but there’s way too many deployment problems right now for them to be practical.

So generally using ES5 modules should be better practise, or deployment problem is the same?

#6