fix(client): update SockJSClient path resolution

Author: knagaitsev

client-src/default/socket.js

@@ -5,20 +5,18 @@
   camelcase
 */
 
-let Client;
-try {
-  // if __webpack_dev_server_client__ is undefined, we should fall back
-  // to SockJSClient
-  Client = __webpack_dev_server_client__;
-} catch (e) {
-  // this SockJSClient is here as a default fallback, in case inline mode
-  // is off or the client is not injected. This will be switched to
-  // WebsocketClient when it becomes the default
-
-  // eslint-disable-next-line global-require
-  const SockJSClient = require('../clients/SockJSClient');
-  Client = SockJSClient;
-}
+// this SockJSClient is here as a default fallback, in case inline mode
+// is off or the client is not injected. This will be switched to
+// WebsocketClient when it becomes the default
+
+// important: the path to SockJSClient here is made to work in the 'client'
+// directory, but is updated via the webpack compilation when compiled from
+// the 'client-src' directory
+const Client =
+  typeof __webpack_dev_server_client__ !== 'undefined'
+    ? __webpack_dev_server_client__
+    : // eslint-disable-next-line import/no-unresolved
+      require('./clients/SockJSClient');
 
 let retries = 0;
 let client = null;

client-src/default/webpack.config.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const webpack = require('webpack');
+
 module.exports = {
   mode: 'production',
   module: {
@@ -15,4 +17,12 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => {
+      resource.request = resource.request.replace(
+        /\/clients\//,
+        '/../clients/'
+      );
+    }),
+  ],
 };

client-src/live/webpack.config.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const webpack = require('webpack');
 const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
@@ -33,5 +34,11 @@ module.exports = {
         to: path.resolve(__dirname, '../../client/live.html'),
       },
     ]),
+    new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => {
+      resource.request = resource.request.replace(
+        /\/clients\//,
+        '/../clients/'
+      );
+    }),
   ],
 };

package.json

@@ -25,7 +25,7 @@
     "test": "npm run test:coverage",
     "pretest": "npm run lint",
     "prepare": "rimraf ./ssl/*.pem && npm run build:client",
-    "build:client:default": "babel client-src/default --out-dir client/default --ignore \"./client-src/default/*.config.js\"",
+    "build:client:default": "babel client-src/default --out-dir client --ignore \"./client-src/default/*.config.js\"",
     "build:client:clients": "babel client-src/clients --out-dir client/clients",
     "build:client:index": "webpack ./client-src/default/index.js -o client/index.bundle.js --color --config client-src/default/webpack.config.js",
     "build:client:live": "webpack ./client-src/live/index.js -o client/live.bundle.js --color --config client-src/live/webpack.config.js",

test/server/__snapshots__/Server.test.js.snap

@@ -4,7 +4,6 @@ exports[`Server addEntries add hot option 1`] = `
 Array [
   Array [
     "client",
-    "default",
     "index.js?http:",
     "localhost:8090",
   ],
@@ -35,7 +34,6 @@ exports[`Server addEntries add hotOnly option 1`] = `
 Array [
   Array [
     "client",
-    "default",
     "index.js?http:",
     "localhost:8090",
   ],

test/server/inline-option.test.js

@@ -27,9 +27,7 @@ describe('inline option', () => {
     afterAll(testServer.close);
 
     it('should include inline client script in the bundle', (done) => {
-      const url = new RegExp(
-        `client/default/index.js\\?http://0.0.0.0:${port}`
-      );
+      const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`);
 
       req.get('/main.js').expect(200, url, done);
     });
@@ -56,9 +54,7 @@ describe('inline option', () => {
     afterAll(testServer.close);
 
     it('should include inline client script in the bundle', (done) => {
-      const url = new RegExp(
-        `client/default/index.js\\?http://0.0.0.0:${port}`
-      );
+      const url = new RegExp(`client/index.js\\?http://0.0.0.0:${port}`);
 
       req.get('/main.js').expect(200, url, done);
     });
@@ -85,9 +81,7 @@ describe('inline option', () => {
         .get('/main.js')
         .expect(200)
         .then(({ text }) => {
-          expect(
-            text.includes(`client/default/index.js?http://0.0.0.0:${port}`)
-          );
+          expect(text.includes(`client/index.js?http://0.0.0.0:${port}`));
           done();
         });
     });

test/server/utils/addEntries.test.js

@@ -17,8 +17,7 @@ describe('addEntries util', () => {
 
     expect(webpackOptions.entry.length).toEqual(2);
     expect(
-      normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !==
-        -1
+      normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1
     ).toBeTruthy();
     expect(normalize(webpackOptions.entry[1])).toEqual('./foo.js');
   });
@@ -34,8 +33,7 @@ describe('addEntries util', () => {
 
     expect(webpackOptions.entry.length).toEqual(3);
     expect(
-      normalize(webpackOptions.entry[0]).indexOf('client/default/index.js?') !==
-        -1
+      normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1
     ).toBeTruthy();
     expect(webpackOptions.entry[1]).toEqual('./foo.js');
     expect(webpackOptions.entry[2]).toEqual('./bar.js');
@@ -56,9 +54,7 @@ describe('addEntries util', () => {
     expect(webpackOptions.entry.foo.length).toEqual(2);
 
     expect(
-      normalize(webpackOptions.entry.foo[0]).indexOf(
-        'client/default/index.js?'
-      ) !== -1
+      normalize(webpackOptions.entry.foo[0]).indexOf('client/index.js?') !== -1
     ).toBeTruthy();
     expect(webpackOptions.entry.foo[1]).toEqual('./foo.js');
     expect(webpackOptions.entry.bar[1]).toEqual('./bar.js');
@@ -296,9 +292,7 @@ describe('addEntries util', () => {
 
       if (expectInline) {
         expect(
-          normalize(webpackOptions.entry[0]).indexOf(
-            'client/default/index.js?'
-          ) !== -1
+          normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1
         ).toBeTruthy();
       }
 
@@ -330,9 +324,7 @@ describe('addEntries util', () => {
 
       if (expectInline) {
         expect(
-          normalize(webpackOptions.entry[0]).indexOf(
-            'client/default/index.js?'
-          ) !== -1
+          normalize(webpackOptions.entry[0]).indexOf('client/index.js?') !== -1
         ).toBeTruthy();
       }
 
@@ -388,9 +380,7 @@ describe('addEntries util', () => {
     expect(webWebpackOptions.entry.length).toEqual(2);
 
     expect(
-      normalize(webWebpackOptions.entry[0]).indexOf(
-        'client/default/index.js?'
-      ) !== -1
+      normalize(webWebpackOptions.entry[0]).indexOf('client/index.js?') !== -1
     ).toBeTruthy();
 
     expect(normalize(webWebpackOptions.entry[1])).toEqual('./foo.js');