45

I followed the instructions in https://getbootstrap.com/docs/4.0/getting-started/webpack/ and I also installed jquery and popper.js with npm.

Still when I use the output bundle.js, the browser keeps on sending GET requests for popper.js.map and I need all the assets to be part of the bundle.js.

I searched a lot for the proper answer but none that explains whats wrong with the instructions mentioned above, exists. Please help.

pfx
  • 20,323
  • 43
  • 37
  • 57
yoni.str
  • 451
  • 1
  • 4
  • 3
  • Popper is distributed in 3 different forms, which you can see listed here: https://unpkg.com/browse/@popperjs/core@2.4.0/dist/ – Andrew Koster May 28 '20 at 21:27
  • Looks like it comes in these forms: "cjs" (CommonJS?), "esm" (EcmaScript Module?) and "umd" (Unpkg Module?) – Andrew Koster May 28 '20 at 21:29
  • So it's possible that Webpack/NPM are using the wrong type of Popper distribution package. It might be worth looking into NPM options, or seeing if you get the same problem when you use Yarn instead of NPM, or looking into Webpack configuration options, especially ones related to module types and imports/exports. – Andrew Koster May 28 '20 at 21:31

9 Answers9

107

At the very end of the popper.js file there is a comment like this:

//# sourceMappingURL=popper.js.map

Removing the commented line fixed the issue for me.

Hoodlum
  • 1,443
  • 1
  • 13
  • 24
  • 14
    Best answer, I owe you many beer. All the JS monkeys are overcomplicating things. A real language or package meager would NEVER throw a warning of this type. Mapping is a dev item and 99% of people need the library and the mapping is just bloat. Having to use a package manger is ludicrous when all you need is a simple UI framework of a few files. I usually agree with Mozilla, but their explanation on this topic is short sighted, biased, and amateur. – Marc Mar 16 '18 at 23:08
  • 2
    This bug was specific to Safari for me, so I just added the file to the js dir to remove the error. https://unpkg.com/popper.js@1.14.7/dist/umd/popper.min.js.map It seems that Safari was trying to load the link in there from node_modules, which it of course cannot. – Jordan Mar 04 '19 at 20:00
  • If mapsource is commented, why webpack search him? – Boss COTIGA Aug 28 '19 at 11:54
  • 4
    The "//#" syntax is called a pragma comment, which is a compiler directive. In this case it is giving browsers directions on how to find the js map. – Hoodlum Aug 31 '19 at 14:45
  • But brother you should mention where that **popper.js** file is, I have searched nearly 1 hour to get to know where that file exists! – Urvish Joshi May 17 '20 at 21:21
  • 1
    BTW, all you have to do is remove the #. Removing the whole line is unnecessary. I also needed to remove //# sourceMappingURL=bootstrap.js.map – GTS Joe Aug 02 '20 at 13:21
34

If you are using Laravel 5+ and/or Laravel Mix, this should help:

To make the warning go away, simply add .sourceMaps() to your js-file(s) in webpack.mix.js:

mix.js('resources/js/app.js', 'public/js').sourceMaps();

The method will tell Laravel Mix to includes the source maps, since they are disabled as default.

17

Removing the comment as suggested above did not work for me, so, if you actually want to get the popper.min.js.map code...

On the popper github page they have the link for the actual popper js file: https://unpkg.com/popper.js/dist/umd/popper.min.js

If you change that to https://unpkg.com/popper.js/dist/umd/popper.min.js.map you'll have what you need!

Paul
  • 409
  • 4
  • 12
  • sure it will works, make sure you cleared the cache and got the fresh edited JS in the browser. – Joseph Miller Mar 08 '20 at 06:42
  • In chrome 80.0.3987.132 , in DevTools, I suddenly started getting a warning that popper.min.js.map could not be parsed. I never had this file on the server, so the actual warning seems to be that this file could not be loaded... After following the link above and uploading the popper.min.js.map to the server, warning went away... – Al-Noor Ladhani Mar 10 '20 at 23:48
  • I have same error i dont know what to do may i need to have both files popper.min.js.map and popper.min.js under my js folder ? can you check my issue pleas https://stackoverflow.com/questions/62357738/failed-to-load-source-map-in-asp-net-mvc-after-publish-to-hosting-site – Abdullah Jun 13 '20 at 18:05
6

We can exclude source maps for Popper.js using SourceMapDevToolPlugin in Webpack 3.

const webpack = require('webpack')

module.exports = {
  // other configs
  plugins: [
    // other plugin configs
    new webpack.SourceMapDevToolPlugin({
      exclude: ['popper.js']
    })
  ]
}

This is the best way I could see to address this for now especially when Popper.js is installed as a dependency with npm install --save popper.js. This allows updating the dependency package without modifying the source files for Popper.js.

Mebatsion Sahle
  • 409
  • 2
  • 9
HarlemSquirrel
  • 8,966
  • 5
  • 34
  • 34
3

My solution is just remove the hashtag '#'

Before

// # sourceMappingURL=popper.min.js.map

After

// sourceMappingURL=popper.min.js.map
Rano Paimin
  • 149
  • 1
  • 5
1

CSS maps are just files that the browser developer tools use to help developers finding where something is in the code.

There's no need to worry, everything works as normal for the user.

Klooven
  • 3,858
  • 1
  • 23
  • 41
  • 3
    I understand that everything works normally, but i don't want to load my server with those repeated unused GET popper.js.map requests. Is there a way to at least cancel those requests? – yoni.str Nov 29 '17 at 13:33
  • 1
    You should check if you find something like `//# sourceMappingURL=/path/to/file.js.map` in the bundle file, and remove those rows. Also you should be able to disable the inclusion of this/these lines in the build process, if you build the files yourself. – Klooven Nov 29 '17 at 13:51
  • Found [this](https://stackoverflow.com/a/30476868/8918893). It may help you disable source maps. – Klooven Nov 29 '17 at 13:55
  • I'll try it, Thnx! – yoni.str Nov 30 '17 at 14:43
0

Add the following code in your file: import { Popper } from 'popper.js' window.Popper = Popper

Instead of uncommenting //# sourceMappingURL=popper.js.map (because we don't want this node_modules/... file in our repository)

desloovere_j
  • 716
  • 7
  • 8
0

At the very end of the popper.js file which is located at node_modules\popper.js\dist\popper.js there is a comment like this:

//# sourceMappingURL=popper.js.map

Removing it fixed the issue for me just like this:

sourceMappingURL=popper.js.map

In my situation, it was inside a long directory path

Urvish Joshi
  • 147
  • 8
0

For me it worked as " GTS Joe " said in comments. I just remove the # from //# sourceMappingURL=popper.js.map and also deleted the whole line of //# sourceMappingURL=bootstrap.js.map and everything worked fine and error has gone