diff --git a/app/react/package.json b/app/react/package.json
index 1a1238258949..512ba1a97a13 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -38,6 +38,7 @@
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "lodash": "^4.17.11",
+    "mini-css-extract-plugin": "^0.4.4",
     "prop-types": "^15.6.2",
     "react-dev-utils": "^6.0.5",
     "semver": "^5.6.0",
diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js
index 07a38175cccf..4a8cdda3339e 100644
--- a/app/react/src/server/cra_config.js
+++ b/app/react/src/server/cra_config.js
@@ -1,4 +1,6 @@
 import semver from 'semver';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
 import { normalizeCondition } from 'webpack/lib/RuleSet';
 
 export function isReactScriptsInstalled() {
@@ -62,8 +64,6 @@ export function applyCRAWebpackConfig(baseConfig) {
   //  Add css minification for production
   const plugins = [...baseConfig.plugins];
   if (baseConfig.mode === 'production') {
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     plugins.push(
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
diff --git a/yarn.lock b/yarn.lock
index 923ea2e6b4b0..f94336545df8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14951,7 +14951,7 @@ mini-css-extract-plugin@0.4.3:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
-mini-css-extract-plugin@~0.4.0:
+mini-css-extract-plugin@^0.4.4, mini-css-extract-plugin@~0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.4.tgz#c10410a004951bd3cedac1da69053940fccb625d"
   integrity sha512-o+Jm+ocb0asEngdM6FsZWtZsRzA8koFUudIDwYUfl94M3PejPHG7Vopw5hN9V8WsMkSFpm3tZP3Fesz89EyrfQ==