create-react-scala-app.g8 icon indicating copy to clipboard operation
create-react-scala-app.g8 copied to clipboard

fastopt-loader.js should relative paths for source files

Open Cedware opened this issue 5 years ago • 2 comments

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.

Cedware avatar Apr 30 '19 22:04 Cedware

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!

shadaj avatar May 17 '20 17:05 shadaj

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?

shadaj avatar May 17 '20 17:05 shadaj