CODEWITHSUNDEEP
bootstrap-4webpack-2popper.js
yoni.str
yoni.str

Reputation: 471

Webpack Installing Bootstrap - missing popper.js.map

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.

Upvotes: 47

Views: 122107

Answers (9)

Rano Paimin
Rano Paimin

Reputation: 199

My solution is just remove the hashtag '#'

Before

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

After

// sourceMappingURL=popper.min.js.map

Upvotes: 4

user5446912
user5446912

Reputation:

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.

Upvotes: 34

HarlemSquirrel
HarlemSquirrel

Reputation: 10134

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.

Upvotes: 6

mehrb0d
mehrb0d

Reputation: 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

Upvotes: 0

Urvish Joshi
Urvish Joshi

Reputation: 147

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

Upvotes: 0

Hoodlum
Hoodlum

Reputation: 1503

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.

Upvotes: 111

Paul
Paul

Reputation: 427

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!

Upvotes: 19

desloovere_j
desloovere_j

Reputation: 756

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)

Upvotes: 0

Klooven
Klooven

Reputation: 3926

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.

Upvotes: 0

Related Questions