leonidas's avatar

popper.js.map - Failed to load resource: the server responded with a status of 404 (Not Found)

After starting to have a look into Laravel Mix, I issued the commands

"npm install && npm run dev".

I have done nothing else. I am now having the issue 'Failed to load resource" on popper.js.map when I view the page source. How do I fix this?

0 likes
12 replies
Vilfago's avatar

What is the content of package.json ?

And could you provide the lines on package-lock.json that contains "popper" ?

leonidas's avatar

@VILFAGO - package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.22"
    }
}

package-lock.json

        "popper.js": {
            "version": "1.14.6",
            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
            "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==",
            "dev": true
        },

Laravel 5.7 btw

leonidas's avatar
leonidas
OP
Best Answer
Level 2

To dig a bit deeper, I was receiving this 404 error in Safari, and weirdly the logout dropdown would not work in the default auth scaffolding. On observation adding the line:

mix.sourceMaps()

removed the resource not found and the dropdown would function correctly. Looking at the Laravel Mix documentation this could be localised to a single file. Therefore I changed the line to:

.js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps()

as it is only necessary for popper.js, recompiled using

npm run dev

I hope this helps someone else as I have spent a couple of hours searching for an answer

15 likes
Vilfago's avatar

Choose your answer as best answer, it's make more probable that someone else find this thread.

rajeshtva's avatar

these lines should be added in wepback.mix.js file present in root directory.

find line with

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

and replace it with


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps();

4 likes
leonidas's avatar

Thanks for the clarification. In the end I have moved over to Django. I did like Laravel for its ease of use and documentation, but at the time it didn’t suit my needs. (I needed a simple admin area) This may have changed in the year since. I haven’t checked.

dokumacifatih's avatar

4 hours later I solved my problem in seconds with your answer. Thank you so much. Thank You!

Mick79's avatar

To what file did you add these lines?

ieeah's avatar

@Mick79 don't know if you still need it, but probably it's the webpack.mix file

leonidas's avatar

Unfortunately I can’t remember. This was such a long time ago, perhaps it’s best to do a project wide search for any keywords?

I’m sorry I cannot be more helpful.

Please or to participate in this conversation.