feat: made socket listener optional (required when using dev-middleware only) (#34)

Author: swernerx

package.json

@@ -24,16 +24,16 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
     "babel-eslint": "^10.0.1",
     "conventional-github-releaser": "^3.1.2",
-    "eslint": "^5.15.1",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-import": "^2.16.0",
     "prettier": "^1.16.4",
-    "standard-version": "^5.0.1"
+    "standard-version": "^5.0.2"
   },
   "license": "MIT",
   "dependencies": {

src/entry.js src/entry-basic.jssrc/entry.js renamed to src/entry-basic.js

@@ -1,26 +1,9 @@
 /* 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
@@ -46,18 +29,3 @@ 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.
-  }
-};

src/entry-devserver.js

@@ -0,0 +1,32 @@
+import url from 'url';
+import SockJS from 'sockjs-client';
+import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
+import {
+  reportBuildError,
+} from 'react-error-overlay'
+
+const connection = new SockJS(
+  url.format({
+    protocol: window.location.protocol,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: '/sockjs-node',
+  })
+);
+
+connection.onmessage = function onmessage(e) {
+  const {type, data} = JSON.parse(e.data);
+  let formatted
+  switch (type) {
+    case 'errors':
+      formatted = formatWebpackMessages({
+        errors: data,
+        warnings: [],
+      });
+      reportBuildError(formatted.errors[0]);
+      break;
+    default:
+    // Do nothing.
+  }
+};

src/index.js

@@ -1,18 +1,22 @@
 import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
 
+const chunkPathBasic = require.resolve('./entry-basic')
+const chunkPathDevServer = require.resolve('./entry-devserver')
+
 class ErrorOverlayPlugin {
   apply(compiler) {
     const className = this.constructor.name
 
     if (compiler.options.mode !== 'development') return
 
+    const devServerEnabled = !!compiler.options.devServer
+
     compiler.hooks.entryOption.tap(className, (context, entry) => {
-      const chunkPath = require.resolve('./entry')
-      adjustEntry(entry, chunkPath)
+      adjustEntry(entry, devServerEnabled)
     })
 
     compiler.hooks.afterResolvers.tap(className, ({ options }) => {
-      if (options.devServer) {
+      if (devServerEnabled) {
         const originalBefore = options.devServer.before
         options.devServer.before = (app, server) => {
           if (originalBefore) {
@@ -25,7 +29,7 @@ class ErrorOverlayPlugin {
   }
 }
 
-function adjustEntry(entry, chunkPath) {
+function adjustEntry(entry, enableDevServer) {
   if (typeof entry === 'string') {
     throw new Error(
       `We currently do not inject our entry code into single-file anonymous entries.
@@ -34,12 +38,18 @@ Please use a multi-main (array) or object-form \`entry\` setting for now.`,
   }
 
   if (Array.isArray(entry)) {
-    if (!entry.includes(chunkPath)) {
-      entry.unshift(chunkPath)
+    if (enableDevServer) {
+      if (!entry.includes(chunkPathDevServer)) {
+        entry.unshift(chunkPathDevServer)
+      }
+    }
+
+    if (!entry.includes(chunkPathBasic)) {
+      entry.unshift(chunkPathBasic)
     }
   } else {
     Object.keys(entry).forEach(entryName => {
-      entry[entryName] = adjustEntry(entry[entryName], chunkPath)
+      entry[entryName] = adjustEntry(entry[entryName], enableDevServer)
     })
   }