Hi there, I'm not sure if its my setup (compose wa...
# decompose
w
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?
a
w
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
🎉 1
fyi update: looks like when the url depth increased like
localhost:8080/review/{review_id}
.. it will get runtime errors
Copy code
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..
Copy code
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
a
Yes, this looks unrelated to Decompose. But thanks for the update!
w
I tried with the same
devServerConfig.js
but same sad panda
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..
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>
Copy code
"proxy": {
  "/auth": {
    target: '<http://localhost:8080>',
    pathRewrite: { '^/auth': '' }
  }
}
a
I assume this is not caused by Decompose, right? Looks like a generic issue.
Maybe ask in #javascript?
I remember I solved a similar issue by adding
"historyApiFallback": true
to
devServerConfig.js
. Docs: https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback
And I setup the js target in the app module as follows:
Copy code
kotlin {
    js {
        browser()
        binaries.executable()
    }
}
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.
👀 1
m
@William did you manage to solve this issue? I get the same thing and I struggle to make it work
w
@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:
Copy code
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()
            }
        }
    }
  ]
m
Oh I see. Thank you! Seems like I might need to do the same for now.