jqueryshopwareshopware6storefront

Update jQuery version in Shopware 6


A project I'm working needs a third party javascript snippet which has a dependency on the 'full' jQuery framework. Shopware (/bootstrap 4) currently ships with jQuery out of the box, but is using the Slim (and not full) version of it.

Is there a way to upgrade/change the used jQuery version?


Solution

  • It is possible to actually replace the slim jQuery with the full version.

    In MyPlugin/src/Resources/app/storefront/build/webpack.config.js put the following:

    const path = require('path');
    const projectRootPath = process.env.PROJECT_ROOT
        ? path.resolve(process.env.PROJECT_ROOT)
        : path.resolve('../../../../../../../');
    
    const shopwarePlatformPath = projectRootPath + '/vendor/shopware/platform/';
    const nodeModulesPlatformPath = shopwarePlatformPath + '/src/Storefront/Resources/app/storefront/node_modules/';
    
    const shopwarePath = projectRootPath + '/vendor/shopware/';
    const nodeModulesPath = shopwarePath + '/storefront/Resources/app/storefront/node_modules/';
    
    let webpack = null;
    let fullPath = null;
    try {
      require.resolve("webpack");
      webpack = require('webpack');
    } catch (e) {
      try {
        require.resolve(nodeModulesPlatformPath + "/webpack");
        webpack = require(nodeModulesPlatformPath + '/webpack');
        fullPath = nodeModulesPlatformPath;
      } catch (e) {
        require.resolve(nodeModulesPath + "/webpack");
        webpack = require(nodeModulesPath + '/webpack');
        fullPath = nodeModulesPath;
      }
    }
    
    let webpackConfig = {
      plugins: [
        new webpack.NormalModuleReplacementPlugin(
          /jquery\.slim/,
          fullPath + 'jquery/dist/jquery'
        ),
        new webpack.NormalModuleReplacementPlugin(
          /jquery\/dist\/jquery\.slim/,
          fullPath + 'jquery/dist/jquery'
        ),
      ],
    };
    module.exports = function () { return webpackConfig };