Fix Webpack-imported modules

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);
         });
     };
 

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;

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

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',