diff --git a/app/assets/javascripts/exercises.js.erb b/app/assets/javascripts/exercises.js.erb
index 00d7f52a..9a5f0378 100644
--- a/app/assets/javascripts/exercises.js.erb
+++ b/app/assets/javascripts/exercises.js.erb
@@ -257,7 +257,7 @@ $(document).on('turbolinks:load', function () {
 
     var highlightCode = function () {
         $('pre code').each(function (index, element) {
-            hljs.highlightBlock(element);
+            hljs.highlightElement(element);
         });
     };
 
diff --git a/app/javascript/d3-tip.js b/app/javascript/d3-tip.js
index 9d884c89..ca00e574 100644
--- a/app/javascript/d3-tip.js
+++ b/app/javascript/d3-tip.js
@@ -1,5 +1,5 @@
 /* eslint no-console:0 */
 
 // JS
-import * as d3Tip from 'd3-tip'
+import * as d3Tip from 'd3-tip/dist'
 window.d3.tip = d3Tip;
diff --git a/app/javascript/highlight.js b/app/javascript/highlight.js
index 18e75a56..39e30b56 100644
--- a/app/javascript/highlight.js
+++ b/app/javascript/highlight.js
@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 
 // JS
-import * as hljs from 'highlight.js'
+import hljs from 'highlight.js/lib/common'
 window.hljs = hljs;
 
 // CSS
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index f1766ea5..bb93371b 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -21,9 +21,11 @@ const envConfig = module.exports = {
         ]
     },
     resolve: {
+        extensions: ['.css', '.ts', '.tsx'],
         alias: {
             $: 'jquery/src/jquery',
             jquery: 'jquery/src/jquery',
+            vis$: 'vis/dist/vis',
         }
     },
     plugins: [
@@ -36,7 +38,6 @@ const envConfig = module.exports = {
             Popper: ['popper.js', 'default'], // for Bootstrap 4
             _: 'underscore',
             vis: 'vis',
-            hljs: 'highlight.js',
             d3: 'd3',
             Sentry: '@sentry/browser',
             Sortable: 'sortablejs',