Update JS tooling

- upgrade webpack, loaders, jest
- added fsevents resolution, need to delete yarn.lock before `yarn install`

README.md

@@ -35,6 +35,8 @@ Getting started:
 
 3. Clone this plugin into Grafana's `data/plugins` directory. Install the deps: `yarn install`, build the JS bundle `yarn dev`. Then load Grafana in your browser and add Flux as a new datasource with the URL `http://localhost:8086`.
 
+Note: If you recently updated your clone, you will need to delete `yarn.lock` and run `yarn install` again. (There is an incompatibility with webpack, fsevents, and certain versions of node.)
+
 ## Releasing
 
 This plugin uses [release-it](https://github.com/webpro/release-it) to release to GitHub.

package.json

@@ -41,26 +41,26 @@
     "@types/jest": "^22.2.3",
     "@types/lodash": "^4.14.74",
     "@types/react": "^16.2.0",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.7.0",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.11",
+    "css-loader": "2.1.0",
     "grafana-sdk-mocks": "github:grafana/grafana-sdk-mocks",
     "husky": "^1.0.0-rc.13",
-    "jest": "^23.0.1",
+    "jest": "23.6.0",
     "lint-staged": "^7.2.0",
     "ng-annotate-webpack-plugin": "^0.3.0",
     "prettier": "1.10.2",
     "release-it": "^8.0.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "style-loader": "^0.21.0",
-    "ts-jest": "^22.4.6",
+    "ts-jest": "23.10.5",
     "ts-loader": "^4.3.0",
     "typescript": "^2.8.3",
-    "webpack": "^4.9.1",
-    "webpack-cli": "^2.1.4"
+    "webpack": "4.28.4",
+    "webpack-cli": "3.2.1"
+  },
+  "resolutions": {
+    "jest/jest-cli/jest-haste-map/sane/fsevents": "1.2.4",
+    "webpack/watchpack/chokidar/fsevents": "1.2.4"
   }
 }

webpack.config.js

@@ -8,81 +8,87 @@ const packageJson = require('./package.json');
 
 module.exports = {
   node: {
-    fs: 'empty'
+    fs: 'empty',
   },
   context: path.join(__dirname, 'src'),
   entry: {
-    'module': './module.ts',
+    module: './module.ts',
   },
   devtool: 'source-map',
   output: {
     filename: '[name].js',
     path: path.join(__dirname, 'dist'),
-    libraryTarget: 'amd'
+    libraryTarget: 'amd',
   },
   externals: [
-    'lodash', 'moment', 'slate', 'prismjs', 'slate-plain-serializer', 'slate-react', 'react', 'react-dom',
-    function (context, request, callback) {
+    'lodash',
+    'moment',
+    'slate',
+    'prismjs',
+    'slate-plain-serializer',
+    'slate-react',
+    'react',
+    'react-dom',
+    function(context, request, callback) {
       var prefix = 'grafana/';
       if (request.indexOf(prefix) === 0) {
         return callback(null, request.substr(prefix.length));
       }
       callback();
-    }
+    },
   ],
   plugins: [
-    new CleanWebpackPlugin('dist', { allowExternal: true }),
+    new CleanWebpackPlugin('dist', {allowExternal: true}),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new CopyWebpackPlugin([
-      { from: 'plugin.json', to: '.' },
-      { from: '../README.md', to: '.' },
-      { from: '../LICENSE', to: '.' },
-      { from: 'partials/*', to: '.' },
-      { from: 'img/*', to: '.' },
+      {from: 'plugin.json', to: '.'},
+      {from: '../README.md', to: '.'},
+      {from: '../LICENSE', to: '.'},
+      {from: 'partials/*', to: '.'},
+      {from: 'img/*', to: '.'},
+    ]),
+    new ReplaceInFileWebpackPlugin([
+      {
+        dir: 'dist',
+        files: ['plugin.json'],
+        rules: [
+          {
+            search: '%VERSION%',
+            replace: packageJson.version,
+          },
+          {
+            search: '%TODAY%',
+            replace: new Date().toISOString().substring(0, 10),
+          },
+        ],
+      },
     ]),
-    new ReplaceInFileWebpackPlugin([{
-      dir: 'dist',
-      files: ['plugin.json'],
-      rules: [{
-        search: '%VERSION%',
-        replace: packageJson.version
-      },{
-        search: '%TODAY%',
-        replace: (new Date()).toISOString().substring(0, 10)
-      }]
-    }]),
   ],
   resolve: {
-    extensions: ['.ts', '.tsx', '.js']
+    extensions: ['.ts', '.tsx', '.js'],
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        loaders: [
-          {
-            loader: 'babel-loader',
-            options: { presets: ['env'] }
-          },
-          'ts-loader'
-        ],
+        loaders: ['ts-loader'],
         exclude: /(node_modules)/,
       },
       {
         test: /\.css$/,
         use: [
           {
-            loader: 'style-loader'
+            loader: 'style-loader',
           },
           {
             loader: 'css-loader',
             options: {
               importLoaders: 1,
-              sourceMap: true
-            }
+              sourceMap: true,
+            },
           },
-        ]
-      }
-    ]
-  }
-}
+        ],
+      },
+    ],
+  },
+};