Parcel version 1.12.3
Node V10.9.0
I am sure I am just doing something wrong, since I believe I had this working before
I am telling parcel
parcel build src/main.html
Where main.html has a root JSX file and imports about 5 other JSX files
main.html
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="Main.jsx"></script>
</body>
</html>
The babelrc is also very simple:
.bablerc
{
"sourceMaps": "inline",
"presets": [
"@babel/preset-react"
],
"plugins": [
[
"transform-class-properties"
]
]
}
this does generate:
D:\wwwroot\protoJob\dist\Main.7485fc72.js.map
But when I open the Chrome Dev tools, I see that the map is for the bundled Main.js but does not break down for the individual jsx files.
Is this a limitation?
Are the individual files listed in the directory listing in the "Page" tab on the side of the code editor (under "Source") ?
I was sure, when I did this three weeks ago, There was a green src folder. But look at the screen shot now:
Could you post the last few lines of the bundle (which include //# sourceMappingURL=...
)
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
cached.hot._acceptCallbacks.forEach(function (cb) {
cb();
});
return true;
}
}
},{}]},{},["C:/Users/ysg4206/AppData/Roaming/npm/node_modules/parcel-bundler/src/builtins/hmr-runtime.js","Main.jsx"], null)
//# sourceMappingURL=/Main.7485fc72.js.map
Are you hosting this page at localhost/some_subfolder
?
Here, the .map file is excepted to be at the root (e.g. localhost/Main.....map
)
If you really want to host it in a subfolder, use parcel index.html --public-url ./some_subfolder
Ok, much better. I really love Parcel. But I am pushing on it's klutz-proof, no-config concept.
What is happening is that JSX files are in the ./src tree,
The build is being done by running (In VScode) at a folder level above the ./src tree the command:
parcel watch src/main.html
This results in the creating of a ./dist folder, I was manually patching the
./dist/main.html since it was doing
<script src="./Main.7485fc72.js"></script>
Which should have been:
<script src="Main.7485fc72.js"></script>
But I was not manually patching the reference to the source map.
Here is what I get after the manual patch to the last line of the bundle (source map)
If you have a suggestion about whether I should continue to have a sourceMaps: inline in the .babelrc as well as to way to not manually edit the main.html and end of the bundle, maybe that should be in a FAQ.
@mischnic I am unclear what the process here is.
A. I thought it was a stupid mistake on my part. Are you declaring this a bug?
B. If it is a bug, will you include making both the html
C. Is there some sort of prioritization in what release bug fixes get added?
D. Do you have a recommendation on what I am doing in my .babelrc to be compatible with parcel?
Thank you.
@DrYSG If you want parcel to generate relative links, which <script src="Main.7485fc72.js"></script>
is, use parcel watch src/main.html --public-url ./
It defaults to absolute urls, as it's common practise to use the parcel devserver/host it on a server
@DeMoorJasper
That is working for me. Thanks for the tip. Maybe put it in a FAQ?
@DrYSG it's kind of already in the cli docs https://parceljs.org/cli.html#set-the-public-url-to-serve-on
We don't have a FAQ section atm
By the way, this is relative to node debugging too, because it generates
//# sourceMappingURL=/index.js.map
for --target=node
by default, so node can't catch breakpoints in sources, at least while WebStorm debugging, with --public-url ./
it generate
//# sourceMappingURL=index.js.map
And breakpoints working as expected. Hooray! Searched long for the answer, thanks @DeMoorJasper
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.
I used the --public-url ./
trick with parcel-bundler
(pre-2.0) but it doesn't seem to work with 2.0.0-nightly.203
. We use it so that we can easily modify the url mount point and not have to rebuild.
I've also come across this issue recently. I've been trying to bundle my code to be used as a library and it wasn't immediately obvious why the source map was linked to with an absolute path.
I think that the problem with having an absolute path by default ( --public-url /
), which generates //# sourceMappingURL=/bundle-name.js.map
in the packaged bundle, is that the source map has to be accessible at the root directory of whatever domain it's hosted on.
By contrast, having a relative path by default ( --public-url .
) would mean we end up with //# sourceMappingURL=bundle-name.js.map
which allows the source map to be colocated within whatever subdirectory the bundled JavaScript sits in without having to rebuild.
This would make it easier to publish libraries for general use in a variety of hosting scenarios.
@joebell1329 @u8sand we've changed this in Parcel 2, now sourcemaps have relative urls
Most helpful comment
@DrYSG If you want parcel to generate relative links, which
<script src="Main.7485fc72.js"></script>
is, useparcel watch src/main.html --public-url ./
It defaults to absolute urls, as it's common practise to use the parcel devserver/host it on a server