Migration guide - Remove support of IE11

Edit on GitHub

This document provides instructions for removing support of IE11 in your Spryker project.

Overview

Microsoft stopped the support of IE11 in June 2022. So it must be removed in Spryker.

Estimated migration time: 1h

Update modules

Update module versions:

composer update spryker/zed-ui spryker-shop/shop-ui

Update configuration files

Update the following configuration files:

Update .browserslistrc

Remove IE11 usage:

IE 11

Update frontend/configs/development.js

  1. Remove the buildVariantSettings variable declaration and usage:
const { buildVariantSettings } = require('../settings');
...
const { buildVariant, isES6Module } = buildVariantSettings;
  1. Remove the es6PolyfillTs variable declaration and usage:
const es6PolyfillTs = await findAppEntryPoint(appSettings.find.shopUiEntryPoints, './es6-polyfill.ts');
...
'es6-polyfill': es6PolyfillTs,
  1. Remove browsers support as specified in the .browserslistrc file:
browsers: [
    '> 1%',
    'ie >= 11',
],
plugins: [
    autoprefixer({
        'browsers': ['> 1%', 'last 2 versions']
    })
]
// must be
plugins: [require('autoprefixer')],

Remove the autoprefixer import at the top of the file.

  1. Set the esmodules property to true instead of using the isES6Module variable:
esmodules: isES6Module,
// must be 
esmodules: true,
  1. Replace usage for the following conditions:
filename: isES6Module ? `./js/${appSettings.name}.[name].js` : `./js/${appSettings.name}.[name].${buildVariant}.js`,
// must be 
filename: `./js/${appSettings.name}.[name].js`,
...(!isES6Module ? ['@babel/plugin-transform-runtime'] : []),
// must be
['@babel/plugin-transform-runtime'],
...(isES6Module ? getAssetsConfig(appSettings) : []),
// must be
...getAssetsConfig(appSettings),
  1. Adjust watchLifecycleEventNames to use only the yves:watch lifecycle event:
const watchLifecycleEventNames = ['yves:watch:esm', 'yves:watch:legacy'];
// must be
const watchLifecycleEventNames = ['yves:watch'];

Update frontend/libs/command-line-parser.js

Remove the build determined module version message:

.option('-m, --module <module>', 'build determined module version', globalSettings.buildVariants)

Update frontend/libs/compiler.js

  1. Remove import of the buildVariantSettings variable:
const { buildVariantSettings } = require('../settings');
  1. Remove the console command from the config section:
const buildVariant = buildVariantSettings.buildVariant;

console.log(`${config.namespace} (${config.theme}) building ${buildVariant} modules for ${config.webpack.mode}...`);

Update frontend/settings.js

  1. Remove build variants:
buildVariants: {
    esm: 'esm',
    legacy: 'legacy',
},
const buildVariantArray = process.argv.filter(argv => argv.includes('module'));
const buildVariant = buildVariantArray.length ? buildVariantArray[0].replace('module:', '') : '';

const buildVariantSettings = {
    buildVariant,
    isES6Module: buildVariant === globalSettings.buildVariants.esm,
};
  1. Remove buildVariantSettings variable export:
module.exports = {
    ...,
    buildVariantSettings,
};

Update src/Pyz/Yves/ShopUi/Theme/default/vendor.ts

Remove all IE11-related polyfills from vendor.ts.

The es6-polyfill.ts file was removed because all polyfills were specified in vendor.ts.

Update templates

  1. In src/Pyz/Yves/ShopUi/Theme/default/templates/page-blank/page-blank.twig, remove the isNewFrontendBuildSupported variable from the template block:
{% block template %}
    {% set isNewFrontendBuildSupported = true %}

    ...
{% endblock %}

  1. Create the src/Pyz/Zed/ZedUi/Presentation/Layout/layout.twig template with the following content:
{% extends '@Spryker:ZedUi/Layout/layout.twig' %}

{% block template %}
    {% set importConfig = importConfig | merge({ isDifferentialMode: false }) %}

    {{ parent() }}
{% endblock %}

Update package.json

  1. Update YVES build commands to the following:
"yves": "node ./frontend/build development",
"yves:watch": "node ./frontend/build development-watch",
"yves:production": "node ./frontend/build production",
  1. Remove IE11-related dependencies:
"classlist-polyfill",
"date-input-polyfill",
"element-closest",
"element-remove",
"intersection-observer",
"string.prototype.startswith",
"whatwg-fetch",
  1. Update the autoprefixer dependency:
"autoprefixer": "~9.8.8",

Install and build using Docker

  1. Install dependencies:
docker/sdk cli npm i 
  1. Build the project assets:
docker/sdk up --assets 

Install and build locally

  1. Install dependencies:
npm install 
  1. Build the project assets:
npm run yves
npm run zed
npm run mp:build