Magento Tutorials Remove or Extend a Module or Theme requirejs-config.js File in Magento 2

« Back to Magento Tutorials

Magento 2 creates a requirejs-config.js file by combining all of the requirejs-config.js files it finds inside modules and themes. The combined file is then included via a script tag in the HTML head of every page on the frontend of your site.

This file allows each module and theme to initialise any JS components that the module will use later on. It's a useful file but sometimes you might want to edit or remove one of these individual files and there is currently no way to do that.

As an example, my custom theme extends the Magento/blank theme, which has the following file:

//vendor/magento/theme-frontend-blank/Magento_Theme/requirejs-config.js
var config = {
    deps: [
        'Magento_Theme/js/theme'
    ]
};

This file includes the js/theme.js file from the Magento_Theme. This JS file does a few things that my custom theme does not need and it includes some JS files that I don't need. I don't like bloat so this has got to go.

If a make a copy of this file in my custom theme, you would expect that this copy would overwrite the above file and be loaded instead. This is how it works with template files, CSS files and other items but with requirejs-config.js files, it does not work in this way. Instead, Magento will include the original file (above) and my extended file. This means there is no way for me to remove the original file and replace it with my own, or just leave it out all together.

Remove requirejs-config.js from Module/Theme

To solve this, I found the file that generates the list individual requirejs-config.js files and added a plugin to remove files that are found in the parent theme and the custom theme.

// etc/frontend/di.xml
<type name="Magento\Framework\RequireJs\Config\File\Collector\Aggregated">
 <plugin name="requirejs-clean" 
  type="YourVendor\YourModule\Plugin\Magento\Framework\RequireJs\Config\File\Collector\AggregatedPlugin"/>  
</type>
<?php
/**
 *
 */
namespace YourVendor\YourModule\Plugin\Magento\Framework\RequireJs\Config\File\Collector;

use Magento\Framework\RequireJs\Config\File\Collector\Aggregated;
use Magento\Framework\View\Design\ThemeInterface;
use Magento\Framework\Component\ComponentRegistrar;

class AggregatedPlugin
{
    /**
     * @param ComponentRegistrar $componentRegistrar
     */
    public function __construct(ComponentRegistrar $componentRegistrar)
    {
        $this->componentRegistrar = $componentRegistrar;  
    }

    /**
     * Remove files that have been extended in the custom theme
     * 
     * @param Aggregated $subject
     * @param array $files
     * @return array
     */
    public function aroundGetFiles(
        Aggregated $subject, 
        \Closure $callback, 
        ThemeInterface $theme, 
        $filePath
    ) {
        $customTheme = '/' . $theme->getThemePath() . '/';
        
        if ($parentTheme = $theme->getParentTheme()) {
            $parentThemePath = $this->componentRegistrar->getPath(
              ComponentRegistrar::THEME, $parentTheme->getFullPath()
            );
            
            if (strpos($parentThemePath, '/vendor/magento/') !== false) {
                $parentTheme = '/' . basename($parentThemePath) . '/';
            }
        }

        $files = $callback($theme, $filePath);
        
        if (!empty($customTheme) && !empty($parentTheme)) {
            foreach ($files as $key => $file) {
                if (($pos = strpos($file->getFileName(), $parentTheme)) !== false) {
                    $relativeFileName = substr($file->getFileName(), $pos+strlen($parentTheme));
    
                    foreach ($files as $findFile) {
                        if (strpos($findFile->getFileName(), $customTheme . $relativeFileName) !== false) {
                            unset($files[$key]);
                            break;
                        }         
                    }   
                }
            }
        }

        return $files;
    }
}

This code gets your theme's directory and then works out the parent theme's directory. This has been tested using the Magento blank theme as the parent theme installed via Composer. My custom theme was installed in app/design/frontend.