Hi there, I'm not sure if its my setup (compose wasm), I'm getting 404 error when I refresh after na...

# decompose

[William]

Hi there,
I'm not sure if its my setup (compose wasm), I'm getting 404 error when I refresh after navigating somewhere from the root url.

1. When I'm at localhost:8080
2. Click on a component
3. Navigate to localhost:8080/submit-review > submit-review screen content displayed ✅
But when I refresh the page, I will get Cannot GET /review-submit error.. did I missed some configuration?

[Arkadii Ivanov]

This looks similar to https://kotlinlang.slack.com/archives/C03H3N51SKT/p1703251691607129

[William]

nice, that fixed it 👍 I was missing webpack.config.d folder, after that needed to nuke the whole environment for it to work properly, something about the cache was behaving weirdly thank you color

[William]

fyi update:

looks like when the url depth increased like localhost:8080/review/{review_id} .. it will get runtime errors

Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok

due to how uninstantiated.mjs tried to access composeApp.wasm via ./composeApp.wasm path..

Cannot GET /review/composeApp.wasm

The composeApp.wasm is located at /composeApp.wasm .. although I think this is a wasm problem not decompose, since the path is set in the .mjs file

[Arkadii Ivanov]

Yes, this looks unrelated to Decompose. But thanks for the update!

[Arkadii Ivanov]

Maybe try this? https://kotlinlang.slack.com/archives/C03H3N51SKT/p1703254058811749?thread_ts=1703251691.607129&cid=C03H3N51SKT

[William]

I tried with the same devServerConfig.js but same sad panda

[William]

since in the .mjs the path is permanently set as ./composeApp.wasm , if i were to open a url like <https://domain.com/subdirectory1/subdirectory2/subdirectory3> i will get an error, because in the .mjs script it's trying to find composeApp.wasm in <https://domain.com/subdirectory1/subdirectory2/> instead of from the root <https://domain.com> .. for now i'll just work with single subdirectory..

[William]

can't get it to work so had to manually do something like these in the devServerConfig.js for now 🤷 this allows me to refresh url like <http://localhost:8080/auth/login>

"proxy": {
  "/auth": {
    target: '<http://localhost:8080>',
    pathRewrite: { '^/auth': '' }
  }
}

[Arkadii Ivanov]

I assume this is not caused by Decompose, right? Looks like a generic issue.

[Arkadii Ivanov]

Maybe ask in #javascript?

[Arkadii Ivanov]

I remember I solved a similar issue by adding "historyApiFallback": true to devServerConfig.js. Docs: https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback

[Arkadii Ivanov]

And I setup the js target in the app module as follows:

kotlin {
    js {
        browser()
        binaries.executable()
    }
}

[Arkadii Ivanov]

I haven't tried yet, but if you run the sample app-js and try opening any url (e.g. http://localhost:8080/foo/bar/baz), then it should fallback to the Counters tab (the default one), as per logic here.

[Mantas Varnagiris]

@William did you manage to solve this issue? I get the same thing and I struggle to make it work

[William]

@Mantas Varnagiris uhhhh.. i don't have the actual solution, didn't had time for it yet.. but,
for a temporary hack fix I just add a proxy configuration in the ../webpack.config.d/devServerConfig.js just to unblock myself

Example below:

proxy: [
    {
        target: "<http://localhost:8081>",
        context: function(pathname, req) {
            if (/^\/auth/.test(pathname)) {
                return true
            } else if(/^\/review/.test(pathname)) {
                return true
            } else if(/^\/user/.test(pathname)) {
                return true
            } else {
                return false
            }
        },
        pathRewrite: function(pathname, req) {
            if (pathname.indexOf("composeApp.wasm") >= 0) {
                return "/composeApp.wasm"
            } else {
                return "/" + pathname.split("/").pop()
            }
        }
    }
  ]

[Mantas Varnagiris]

Oh I see. Thank you! Seems like I might need to do the same for now.

[Mantas Varnagiris]

Found a solution that did the trick for me https://kotlinlang.slack.com/archives/C01F2HV7868/p1719747783647939?thread_ts=1719740202.360719&cid=C01F2HV7868