Parcel: sourceMappingURL should be relative

Created on 8 May 2019  Â·  16Comments  Â·  Source: parcel-bundler/parcel

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?

Bug Needs Verification ✨ Parcel 2

Most helpful comment

@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

All 16 comments

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:

image

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)

image

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

@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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

will-stone picture will-stone  Â·  3Comments

jsftw86 picture jsftw86  Â·  3Comments

dsky1990 picture dsky1990  Â·  3Comments

jzimmek picture jzimmek  Â·  3Comments

philipodev picture philipodev  Â·  3Comments