Webpack Installing Bootstrap - missing popper.js.map

Question

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.

Nonillion

Popper is distributed in 3 different forms, which you can see listed here: unpkg.com/browse/@popperjs/[email protected]/dist – Balling

Looks like it comes in these forms: "cjs" (CommonJS?), "esm" (EcmaScript Module?) and "umd" (Unpkg Module?) – Balling

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. – Balling

Answer 1

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.

Nonattendance

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. – Gamal

This bug was specific to Safari for me, so I just added the file to the js dir to remove the error. unpkg.com/[email protected]/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. – Superpatriot

If mapsource is commented, why webpack search him? – Slovene

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. – Nonattendance

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! – Afterdinner

BTW, all you have to do is remove the #. Removing the whole line is unnecessary. I also needed to remove //# sourceMappingURL=bootstrap.js.map – Kudos

Answer 2

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.

Baronage

This worked for me as well in Laravel 6, thank you. – Salome

...and for me in Laravel 7 (and a much better idea than changing the core popper.js IMHO). – Kleon

the warning on the developer tools had gone using this solution. [+1] – Knudsen

I have tried this and I get "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" – Killer

Answer 3

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!

Olivia

sure it will works, make sure you cleared the cache and got the fresh edited JS in the browser. – Jorgan

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... – Polliwog

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 #62358238 – Haman

Answer 4

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.

Malefactor

Works perfect without having to manually edit, or create some quick fix. – Frutescent

Answer 5

My solution is just remove the hashtag '#'

Before

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

After

// sourceMappingURL=popper.min.js.map

Cattycornered

Answer 6

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.

Instead

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? – Nonillion

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. – Instead

Found this. It may help you disable source maps. – Instead

I'll try it, Thnx! – Nonillion

Answer 7

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)

Alternator

Answer 8

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

Afterdinner

Answer 9

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

Discountenance