Skip to main content

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

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-bootstr… post and KFoobar 's proposal worked for me. So, I stopped the browsersync process and edited the webpack.mix.js file like this .sourceMaps(); To make the warning go away, simply add .sourceMaps() to your js-file(s) in webpack.mix.js. rerun npm run watch or npm run build etc 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 = 'https://demo.ddev.site';
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Configuration
 |--------------------------------------------------------------------------
 */
mix
  .webpackConfig({
    // Use the jQuery shipped with Drupal to avoid conflicts.
    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/demo.style.scss', 'css');

/*
 |--------------------------------------------------------------------------
 | JS
 |--------------------------------------------------------------------------
 */
mix.js('src/js/demo.script.js', 'js').sourceMaps();

Notice the extra .sourceMaps(); at the end of the mix.js declaration.

webpack