@cerner/terra-toolkit-docs/src/terra-dev-site/tool/webpackConfigTerra/upgrade-guide.6/Version 1.z.tool.mdx

Contains documentation for packages in the terra-toolkit monorepo

import { Badge } from '@cerner/webpack-config-terra/package.json?dev-site-package';

<Badge />

# webpack-config-terra Upgrade Guide

## Changes from terra-toolkit 6.x  to @cerner/webpack-config-terra 1.0.0

We have broken terra-toolkit up into several component parts de-couple major version upgrades to unrelated components. Upgrading WDIO shouldn't affect our webpack version and vice versa.

The webpack config formerly housed in terra toolkit has been migrated to it's own package `@cerner/webpack-config-terra`.

To upgrade change dependency and change how you are requiring the config.

```diff
- const webpackConfig = require('terra-dev-site/config/webpack/webpack.config');
+ const webpackConfig = require('@cerner/webpack-config-terra');
```

### Removed RAF

Previously we provided the requestAnimationFrame polyfill but have determined it doesn't need to be polyfilled of our supported browsers. See [caniuse.com](https://caniuse.com/requestanimationframe). This should not affect your application.

### Aggregate themes changed to opt in.

When components adhere to the new themeing strategy, aggregate themes is no longer needed. Theme Aggregation is turned off by default and enabling it will significantly reduce webpack performance.

Minimum terra component versions that support theme context as of 12/8/2020. Any components not listed here either do not have themeable variables, do not support the theme context and should be replaced, or have been introduced since this list was generated and support the theme context.

  * `terra-abstract-modal@3.25.0`
  * `@cerner/terra-docs@1.0.0`
  * `terra-action-footer@2.42.0`
  * `terra-action-header@2.43.0`
  * `terra-alert@4.29.0`
  * `terra-application-header-layout@3.28.0`
  * `terra-application-links@6.34.0`
  * `terra-application-name@3.30.0`
  * `terra-application-navigation@1.37.0`
  * `terra-application-utility@2.35.0`
  * `terra-application@1.19.0`
  * `terra-avatar@3.3.0`
  * `terra-badge@3.35.0`
  * `terra-brand-footer@2.24.0`
  * `terra-button-group@3.39.0`
  * `terra-button@3.36.0`
  * `terra-card@3.27.0`
  * `terra-cell-grid@1.5.0`
  * `terra-clinical-data-grid@2.25.0`
  * `terra-clinical-detail-view@3.20.0`
  * `terra-clinical-header@3.16.0`
  * `terra-clinical-item-display@3.18.0`
  * `terra-clinical-item-view@3.19.0`
  * `terra-clinical-label-value-view@3.20.0`
  * `terra-clinical-onset-picker@4.21.0`
  * `terra-collapsible-menu-view@6.34.0`
  * `terra-date-input@1.14.0`
  * `terra-date-picker@4.38.0`
  * `terra-date-time-picker@4.38.0`
  * `terra-demographics-banner@3.37.0`
  * `terra-dialog-modal@3.38.0`
  * `terra-dialog@2.42.0`
  * `terra-divider@3.27.0`
  * `terra-dropdown-button@1.14.0`
  * `terra-form-checkbox@4.3.0`
  * `terra-form-field@4.3.0`
  * `terra-form-fieldset@2.42.0`
  * `terra-form-input@3.5.0`
  * `terra-form-radio@4.5.0`
  * `terra-form-select@6.6.0`
  * `terra-form-textarea@4.5.0`
  * `terra-grid@6.21.0`
  * `terra-html-table@1.6.0`
  * `terra-hyperlink@2.34.0`
  * `terra-icon@3.32.0`
  * `terra-image@3.28.0`
  * `terra-layout@4.24.0`
  * `terra-list@4.31.0`
  * `terra-menu@6.34.0`
  * `terra-modal-manager@6.34.0`
  * `terra-navigation-side-menu@2.31.0`
  * `terra-notification-dialog@3.35.0`
  * `terra-overlay@3.49.0`
  * `terra-paginator@2.51.0`
  * `terra-popup@6.35.0`
  * `terra-profile-image@3.30.0`
  * `terra-progress-bar@4.23.0`
  * `terra-search-field@3.51.0`
  * `terra-section-header@2.37.0`
  * `terra-show-hide@2.35.0`
  * `terra-signature@2.30.0`
  * `terra-slide-group@4.21.0`
  * `terra-slide-panel@3.27.0`
  * `terra-spacer@3.40.0`
  * `terra-status-view@4.27.0`
  * `terra-switch@1.0.0`
  * `terra-table@4.8.0`
  * `terra-tabs@6.35.0`
  * `terra-tag@2.35.0`
  * `terra-text@4.31.0`
  * `terra-time-input@4.29.0`
  * `terra-toolbar@1.8.0`

### themeConfig moved from env to options

Theme config can be set in three ways. Through the THEME env, by adding a themeConfig option to the env variable when extended through javascript or by setting adding a terra-theme.config.js file to your package root.

Using the terra-theme.config.js file is the preferred method of configuring themes, but in some cases like ci and building multiple sites with one webpack config. The method of adding the themeConfig option to the env variable is kind of weird since the env object is generally reserved for environment variable set through webpack and not objects. To address this we've added an additional options object that can optionally be passed in to the webpack config.

```diff
const webpackConfig = require('webpack-config-terra');

const themeConfig = {
  theme: 'terra-dark-theme',
};

-+module.exports = webpackConfig({themeConfig}, {});
+module.exports = webpackConfig({}, {}, {themeConfig});

```

### Removed aggregateOptions from env

Similar the env theme config, aggregateOptions was an object added to the env object. Unlike themeConfig we don't know of anyone using aggregateOptions. Instead of moving it to the `options` object we just went ahead and removed it. If you have a use case for config, log an issue and we'll see what we can do.

### deprecating THEME env support

To consolidate our api the THEME env variable is now supplied as the webpack env option `defaultTheme`. For the timebeing both are supported but the THEME env will be removed in the next major version of webpack-config-terra.

```diff
"scripts": {
-    "pack": "THEME=terra-dark-theme webpack"
+    "pack": "webpack --env.defaultTheme=terra-dark-theme"
}
```

### Postcss 8 as peer dependency

Postcss is now a required peer dependency. It must be added as a dev dependency to your package.

```diff
  "devDependencies": {
+   "postcss": "^8.0.0",
  }
}
```