create-react-scala-app.g8
create-react-scala-app.g8 copied to clipboard
fastopt-loader.js should relative paths for source files
Hello. I had some struggle with the source-maps, because of the generated paths to the original files were not working in Chrome and Firefox. Chrome, for example, tried to load the "App.scala" file from this following URL, which obviously doesn't work:
http://localhost:8080/file:/C:/Users/Cedric/IdeaProjects/styled-demo/src/main/scala/com/cedware/styleddemo/App.scala
After some research I figure out that the problem was caused by this line:
return "file://" + path.resolve(s);
The file URI scheme requires a hostname if we use "file://" (with a double slash). If we want to use a path on the local filesystem we have to use "file:///" (with a triple slash).
return "file://" + path.resolve(s);
More details about that: https://en.wikipedia.org/wiki/File_URI_scheme
After this Chrome could load all of the original source files and debugging inside chrome was possible as well. But when I tried to use IntelliJ to Debug the app, all the breakpoints didn't work. So finally I, created a react app with typescript, via create-react-app to compare the source file structure inside chrome. And tried to return a relative path instead of the absolute path:
map.sources = map.sources.map(s => { return s; });
Which makes the whole point of map.sources.map needless. So I removed it completely. But in the end, I'm not sure if the removed part had any purpose I didn't think about.
P.S: Thank you for making the use of reactjs with scalajs possible.
Thanks for the issue @Cedware. To be completely honest, I've forgotten myself why the loader transforms individual source locations. I'll test out directly returning paths locally and if things work we can get that change in!
So I did a bit of digging into the problem, and path.resolve
returns a full path with a leading slash so the returned file effectively returns a file:///...
. Without absolute paths, the paths are relative to the target folder so the dev tools wouldn't be able to resolve the path (resulting in a Could not load content for webpack:///../../../../src/main/scala/hello/world/App.scala (HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)
). So I think we need to stick to the existing absolute path logic.
I'm curious, what do the source map paths look like for Create React App?