Changing base URL for subpath install fails - GLTFLoader path issue?

[oleole39]

Hello,

I have been trying to build the app to install it to a subpath (e.g.: https://mydomain.tld/m2m) with:

sed -ri 's@(base: \x27)./@\1/m2m@g' "./vite.config.js" #change base URL
npm install && npm run build

The build succeeds. Then I upload the files it on the server with basic configuration and the app does load in the browser - but the app's right panel does not open on index.html and the console shows the following error:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    parse GLTFLoader.js:447
    load GLTFLoader.js:309
    load three.core.js:44095
    promise callback*load three.core.js:44083
    load GLTFLoader.js:305
    load_model_file StepLoadModel.ts:160
    setup_model_buttons MarketingBootstrap.ts:32
    setup_model_buttons MarketingBootstrap.ts:55
    add_event_listeners MarketingBootstrap.ts:61
    add_event_listeners MarketingBootstrap.ts:60
    d MarketingBootstrap.ts:11
    <anonymous> MarketingBootstrap.ts:81
GLTFLoader.js:289:13

As for create.html, it works as expected, and shows no error in the console.

That is unlikely to be a server-related issue because if I build the app without changing the base URL and install it at domain's root, the app works as expected and does not show such error.

[scottpetrovic]

@oleole39 - If the right panel is not opening, that usually means there was some javascript error and the javascript stops processing the rest of its code

From the network panel on the developer tools, you can probably see what URL is trying to load and give a 404 (not found). When I have seen that error before, it is trying to load an error HTML page...which isn't valid GLB data...so the error looks weird.

My guess it is something with these relative URLs not resolving correctly in the MarketingBootstrap.ts file

this.mesh2motion_engine.load_model_step.load_model_file('../models/model-human.glb', 'glb')

I would have to try to test this out locally

[oleole39]

My guess it is something with these relative URLs not resolving correctly in the MarketingBootstrap.ts file

Your guess is right, let me try further and revert.

[oleole39]

you can probably see what URL is trying to load and give a 404 (not found). When I have seen that error before, it is trying to load an error HTML page...which isn't valid GLB data...so the error looks weird.

So that was exactly this (except that due to my server config, the error code was a 302 and the content the html SSO login page).

The following commands helped me fix this issue:

sed -i 's@../model@https://mydomain.tld/m2m/models@g' assets/main-8ada01b5.js
sed -i 's@../animations@https://mydomain.tld/m2m/meshtest/animations@g' assets/main-8ada01b5.js
sed -i 's@../animpreview@https://mydomain.tld/m2m/meshtest/animpreview@g' assets/dialog-9a29582e.js

sed -i 's@rigs/@m2m/rigs/@g' assets/dialog-9a29582e.js

Alternatively, this works too (without full URL):

sed -i 's@../models@/m2m/models@g' assets/main-8ada01b5.js
sed -i 's@../animations@/m2m/meshtest/animations@g' assets/main-8ada01b5.js
sed -i 's@../animpreview@/m2m/meshtest/animpreview@g' assets/dialog-9a29582e.js

sed -i 's@rigs/@m2m/rigs/@g' assets/dialog-9a29582e.js

Note that both the 4th command must be a relative URL, or it would fail.
Also, I guess the hashes in filenames are specific to my build and that anyone else reading this would see different hashes for the same file.

I have been trying to work on a PR (#60 ) that would use the base variable defined in vite.config.js in the path to other files so that both ./ (default) and /mysubpath work out of the box.
But at the moment it doesn't work - for some reason after build the baseUrl variables do not get replaced by their value...