-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Investigate custom source map filenames in development #1322
Comments
xref: webpack/webpack#3603 |
Tagging to revisit before 0.10. |
Tagging for 0.9.1 because maybe the fix is super easy. |
Should we consider this breaking? Do you think anyone is relying on the fact that it's We could put it in 0.10.0 to be safe (I don't think it's too far out) ... |
I'm cool with this being in 0.10.0. |
So I was fiddling with this... we can choose from (assets living in the
There's others, but these make the most sense. |
Personally, I'm a fan of 1 or 2. They're the only true paths. |
Do you mean for prod sourcemaps? Shouldn't we do this in development primarily for easy editing in DevTools? |
These were the dev source maps. My mistake on basing out of build, even for production we should probably base out of appSrc. |
Hmm.. looking at this more it actually seems like we need to base the dev ones out of Maybe we can cc someone from the chrome devtools team to ask how we can make this happen (probably won't because of security reasons). :) This example is out of the diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index c7948b6..8989a59 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -18,11 +18,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
-
-// @remove-on-eject-begin
-// `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174
const path = require('path');
-// @remove-on-eject-end
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
@@ -77,6 +73,7 @@ module.exports = {
filename: 'static/js/bundle.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
+ devtoolModuleFilenameTemplate: info => path.relative(paths.appBuild, info.absoluteResourcePath),
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules. |
Hmm I feel silly but I don't understand what this would do. Why does it need the compiled files? If I run |
We tell the dev server to act like prod, see this snippit from dev config: output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
}, When running in dev mode, you can note that assets are being served from |
@brandonmikeska did you still have interest in pursuing this the rest of the way? |
I thought that line was not used at all (and only prevented crashes). How exactly does WDS use it? What does it mean to serve "from" a folder if it's serving from memory? |
The majority happens here. Basically, webpack creates a bunch of express routes for our assets using the provided output path. e.g. Note that fs is inherited from the middleware, which, isn't a real filesystem. See here and here which detects webpack is in memory mode and creates a fake filesystem for express to use. As far as express is concerned, it's serving static files. |
Right. But where does |
Oh, I meant to edit that The root relative path should prob be |
@Timer yeah my apologies it was a busy week with releases and family in town. I was doing some research and everything I come across uses the build directory. This blog shows a way, seems complicated to me, but a way to enable the file editing using chrome. https://medium.com/@rafaelideleon/webpack-your-chrome-devtools-workspaces-cb9cca8d50da#.8l5v85vzd |
Added in 927c539. |
Hmm. So how do we use this? I expected this would make it easy to edit files in Chrome, but I couldn't make it work. |
I'd assume we'd need to pass absolute paths... |
I'm okay with requiring to set locations, but I couldn't figure out how to do that either.. It just wouldn't set breakpoints for me. |
Hmm. I'm not sure how I did it but I think it works now. I assume this is the best we can do. |
Hello! Sorry to be chiming in so long after this thread and 927c539, but I thought I'd point out a quirk I discovered resulting from the I've been working with StackTrace.JS as part of an error handling utility I'm developing. StackTrace.JS uses source maps to correct filenames in Error stracktrace frames to their original source file, super useful for development and production error monitoring. While testing StackTrace.JS's behavior in conjunction with CRA, I noticed that the absolute system paths it outputs as the sourcemap When browser devtools log errors to the console, the filename portion of stacktraces are typically links that jump to a line:column location in the sources tab/inspector, but this only works if the filenames are either absolute or relative urls. Absolute system paths break this capability. This isn't a huge deal, at least for my purposes, as I could theoretically map over the StackFrames to re-correct filenames to be root relative before an error gets logged to the console. Still, I wonder whether there's a If you don't mind, I'm going to investigate and report back, potentially with a PR. Thanks for all your great work on CRA, btw! |
Ok. After playing with using I also realized that that I was mistaken about how the jump-to-sources links work in the devtools console. If the sourcemap sources contains an entry for |
On mobile now but see this thread for context:
https://twitter.com/danbucholtz/status/813786323660210176
The text was updated successfully, but these errors were encountered: