fix: format compiler errors (#28) (#30)

.eslintignore

@@ -1 +1,3 @@
 lib/
+
+node_modules/

.travis.yml

@@ -9,7 +9,8 @@ before_install:
   - export PATH="$HOME/.yarn/bin:$PATH"
 
 script:
-  - yarn ci
+  - cd example && yarn
+  - cd ../ && yarn && yarn ci
 
 notifications:
   email: false

package.json

@@ -38,7 +38,9 @@
   "license": "MIT",
   "dependencies": {
     "react-dev-utils": "^7.0.1",
-    "react-error-overlay": "^5.1.2"
+    "react-error-overlay": "^5.1.2",
+    "sockjs-client": "^1.3.0",
+    "url": "^0.11.0"
   },
   "peerDependencies": {
     "webpack": "^4.0.0"

src/entry.js

@@ -1,9 +1,26 @@
 /* eslint-disable */
+import url from 'url';
+import SockJS from 'sockjs-client';
 import {
   setEditorHandler,
+  reportBuildError,
   startReportingRuntimeErrors,
 } from 'react-error-overlay'
 import launchEditorEndpoint from 'react-dev-utils/launchEditorEndpoint'
+import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
+
+
+
+const connection = new SockJS(
+  url.format({
+    protocol: window.location.protocol,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: '/sockjs-node',
+  })
+);
+
 
 setEditorHandler(errorLocation => {
   // Keep this sync with errorOverlayMiddleware.js
@@ -29,3 +46,18 @@ startReportingRuntimeErrors({
     }
   },
 })
+
+connection.onmessage = function(e) {
+  const {type, data} = JSON.parse(e.data);
+  switch (type) {
+    case 'errors':
+      const {errors} = formatWebpackMessages({
+        errors: data,
+        warnings: [],
+      });
+      reportBuildError(errors[0]);
+      break;
+    default:
+    // Do nothing.
+  }
+};