How to fix the drupal radix subtheme popper missing assets/js/popper.js.map bug

Jun
2020
23
After i installed Radix (drupal.org/project/radix) and created a new subtheme, there was an issue with webpack and the node_modules compiled libraries. It seems like the popper.js.map file was missing despite the fact that it was in the node_modules folder and the package.json file. So after a lot of debugging and searching i came to this https://stackoverflow.com/questions/47549298/webpack-installing-bootstra... post and KFoobar 's proposal worked for me. So, I stopped the browsersync process and edited the webpack.mix.js file like this
npm run watch <- cmd+c
mix.js('resources/js/app.js', 'public/js').sourceMaps();
To make the warning go away, simply add .sourceMaps() to your js-file(s) in webpack.mix.js. rerun npm run watch and problem solved! The complete webpack.mix.js file looks like this now
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your application. See https://github.com/JeffreyWay/laravel-mix.
|
*/
const proxy = 'http://127.0.0.1:8888/d8test/web';
const mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Configuration
|--------------------------------------------------------------------------
*/
// mix
//   .setPublicPath('assets')
//   .disableNotifications()
//   .options({
//     processCssUrls: false
//   });
mix
  .webpackConfig({
    externals: {
      jquery: 'jQuery'
    }
  })
  .setPublicPath('assets')
  .disableNotifications()
  .options({
    processCssUrls: false
  });
/*
|--------------------------------------------------------------------------
| Browsersync
|--------------------------------------------------------------------------
*/
mix.browserSync({
  proxy: proxy,
  files: ['assets/js/**/*.js', 'assets/css/**/*.css'],
  stream: true,
});

/*
|--------------------------------------------------------------------------
| SASS
|--------------------------------------------------------------------------
*/
mix.sass('src/sass/people_flow.style.scss', 'css');

/*
|--------------------------------------------------------------------------
| JS
|--------------------------------------------------------------------------
*/
mix.js('src/js/people_flow.script.js', 'js').sourceMaps();
Tags: 
Cats: 
this is an arrow pointing back to the top of the page