Import Map Usefulness

I wanted to utilize a import map so that I only needed to change things in one place if the location of files in project needed to be changed. However, I ran into an issue that makes me think this will not work well with a Construct 3 project.

The problem is that the simplest way to make the import path work in all cases is to base it off the the root of the web app. A issue arises when you export the project lets say for windows. So here is what a possible import map file looks like and a directory structure I am using.

{ "imports" : { "ecs_manager": "/ECS/ECSManager.js", "player": "/ECS/Player.js", "enemy": "/ECS/Enemy.js", "text": "/ECS/Text.js", "move_system": "/ECS/MoveSystem.js", "collision_system": "/ECS/CollisionSystem.js", "component": "/ECS/Component.js", "move_component": "/ECS/MoveComponent.js", "coll_polygon_component": "/ECS/CollPolygonComponent.js", "entity": "/ECS/Entity.js", "utilities": "/Utilities/Utilities.js", "vector": "/Utilities/Vector.js", "enemy_component": "/ECS/EnemyComponent.js", "system": "/ECS/System.js" } }

In preview mode the /ECS directory is off of the root so I can use the key in an import statement in main.js and in a file that's in ECS folder that reference the same import because it's based off the root.

When I export for windows there are additional directories before the ECS now so the path from root is different.

This makes you revert back to relative paths, but now you can't use the same import map key because the path to the file is different from different directories.

Just wondering if anyone else has a solution to this or I may just not use import maps at all.

Thanks

As with import statements, in the import map you need to start paths with ./ for them to refer to files in the project. If they start with /, that is (I think) interpreted as a URL relative to the root of the origin, which will happen to work in preview as that runs on preview.construct.net, but won't work on export.

So you should start those paths with ./. I'm not sure what you mean by this:

This makes you revert back to relative paths, but now you can't use the same import map key because the path to the file is different from different directories.

You should be able to use the same import map key everywhere. The location you use it doesn't matter.

I guess my question revolves around files being in different sub-folders referring to a common import. The relative path to that shared file would be different from each file in a different sub-folder. So wouldn't that make it impossible for the same import to be utilized ?

In the import map, the relative paths are relative to the root of the scripts folder. So you don't need to worry about which subfolder you are importing something from if it uses a name defined in an import map.

Thank you, for some reason I thought it was relative from the file that was importing a module. That makes things a lot easier :)

Interesting side note on Import Maps ASHLEY.

It is working now as expected on one machine. If I run the same project on 2 other PCs I get 404 errors trying to load.

I noticed that the <script type="importmap" /> is there everything works correctly.

On the other two machines that script tag is missing on preview and the json importmap is not included so then it can't resolve the module names.

So I am not sure why it's included in one preview on one machine but not on my other machines.

I would definitely appreciate any thoughts you have.

Thank you

My telepathic debugging skills aren't working in this case and I have no idea. You'd need to file an issue following all the guidelines for me to be able to look in to it.