dependency was not found (browser)

[luandro]

Expected Behavior

Should load balena-sdk on the browser using NuxtJS.

Actual Behavior

Get compilation error:

 ERROR  Failed to compile with 2 errors

This dependency was not found:
                              
* fs in ./node_modules/balena-settings-client/build/settings.js, ./node_modules/balena-settings-storage/build/node-storage.js
                              
To install it, you can run: npm install --save fs

Steps to Reproduce the Problem

1. npm i -S balena-sdk
2. Add to Nuxt app page: pages/index.vue:

<script>
export default {
  mounted() {
    if (process.client) {
      const { getSdk } = require('balena-sdk/es2015')
    }
  }
}
</script>

3. Get error on console.

Specifications

• SDK version: [email protected]
• Browser: https://www.whatsmybrowser.org/b/IW7UX
• Node version: v12.18.3
• Npm version: 7.24.0
• OS: Manjaro 21.1

[thgreasi]

Hi,
Thanks for raising this. It is indeed an issue with how module bundlers analyze the sources and take into account even branches that never run in browsers.
The simplest workaround is to use the pre-bundled balena-sdk, which you can find in ~/es2015/balena-browser.min.js (or even use a CDN like https://unpkg.com/[email protected]/es2015/balena-browser.min.js).

In case you prefer using ES6 module imports, a more involved fix for this is to edit your nuxt.config.js like:

export default {
    build: {
        extend(config, {}) {
            config.node = {
                fs: 'empty',
                path: 'empty',
                balena-settings-client: 'empty',
                node-localstorage: 'empty',
            }
        }
    }
}

For sure though we do need to change the SDK's structure so that such workarounds are not necessary,