Avoid loading balena-settings-client in browsers using the browser field

karma.conf.js

@@ -24,18 +24,23 @@ module.exports = function (config) {
 
 	const karmaConfig = getKarmaConfig(packageJSON);
 	karmaConfig.webpack.resolve.fallback = {
+		// required by: temp in tests
 		constants: false,
+		// required by: mockttp in tests
 		crypto: require.resolve('crypto-browserify'),
+		// required by: mocha.parallel in tests
 		domain: require.resolve('domain-browser'),
-		dns: false,
+		// used conditionally in the tests
 		fs: false,
-		net: false,
+		// required by: ndjson
 		os: require.resolve('os-browserify'),
+		// used conditionally in the tests
 		path: false,
+		// required by: mockttp in tests
 		querystring: require.resolve('querystring-es3'),
+		// required by: balena-request
 		stream: require.resolve('stream-browserify'),
-		url: false,
-		util: require.resolve('util'),
+		// required by: balena-request
 		zlib: require.resolve('browserify-zlib'),
 	};
 	karmaConfig.webpack.plugins = [

package.json

@@ -4,7 +4,11 @@
   "description": "The Balena JavaScript SDK",
   "main": "index.js",
   "types": "index.d.ts",
-  "browser": "es2015",
+  "browser": {
+    "index.js": "./es2015/index.js",
+    "es2015/util/settings-client.js": "./es2015/util/settings-client.browser.js",
+    "es2018/util/settings-client.js": "./es2015/util/settings-client.browser.js"
+  },
   "homepage": "https://github.com/balena-io/balena-sdk",
   "repository": {
     "type": "git",

src/index.ts

@@ -246,19 +246,11 @@ export const getSdk = function ($opts?: SdkOptions) {
 	 * @memberof balena
 	 */
 
-	let settings: InjectedDependenciesParam['settings'];
-	if (opts.isBrowser) {
-		const { notImplemented } = require('./util') as typeof import('./util');
-		settings = {
-			get: notImplemented,
-			getAll: notImplemented,
-		};
-	} else {
-		settings =
-			require('balena-settings-client') as typeof import('balena-settings-client') as InjectedDependenciesParam['settings'];
-		if (opts.dataDirectory == null) {
-			opts.dataDirectory = settings.get('dataDirectory');
-		}
+	const settings = (
+		require('./util/settings-client') as typeof import('./util/settings-client')
+	).loadSettingsClient(opts);
+	if (!opts.isBrowser && opts.dataDirectory == null) {
+		opts.dataDirectory = settings.get('dataDirectory');
 	}
 
 	if ('apiKey' in opts) {

src/util/settings-client.browser.ts

@@ -0,0 +1,7 @@
+export const loadSettingsClient = () => {
+	const { notImplemented } = require('.') as typeof import('.');
+	return {
+		get: notImplemented,
+		getAll: notImplemented,
+	};
+};

src/util/settings-client.ts

@@ -0,0 +1,13 @@
+import type { InjectedDependenciesParam, InjectedOptionsParam } from '../';
+
+export const loadSettingsClient = (opts: InjectedOptionsParam) => {
+	// Even though we specify an alternative file for this in the package.json's `browser` field
+	// we still need to handle the `isBrowser` case in the default file for the case that the
+	// bundler doesn't support/use the `browser` field.
+	if (opts.isBrowser) {
+		return (
+			require('./settings-client.browser') as typeof import('./settings-client.browser')
+		).loadSettingsClient();
+	}
+	return require('balena-settings-client') as typeof import('balena-settings-client') as InjectedDependenciesParam['settings'];
+};