Help loading local JSON file in either web or Electron contexts

[lbssousa]

I’m writing a Quasar app intented for running in either web or Electron contexts. When the app starts, I need to load some local JSON files. I used to implement different approaches for each case, loading the files via AJAX in web context, or via Node.js function fs.readFile() in Electron context.

I’ve tried to put them all toghether in a generic getJSON() function like this:

import { Platform } from 'quasar'
(...)
function getJSON(path) {
  return new Promise((resolve, reject) => {
    if (Platform.is.electron) {
      let fs = require('fs')

      fs.readFile(path, (error, data) => {
        if (error) {
          reject(error)
        } else {
          resolve(data)
        }
      })
    } else {
      let request = new XMLHttpRequest()

      request.addEventListener('load', () => {
        if (request.status >= 200 && request.status < 400) {
          resolve(request.response)
        } else {
          reject(Error(request.statusText))
        }
      })

      request.addEventListener('error', () => {
        reject(Error("Network Error"))
      })

      request.open('GET', path, true)
      request.send()
    }
  }).then(JSON.parse).catch(error => {
    console.log('Failed to load JSON file', path, error)
    throw error
  })
}

However, when I try to run quasar dev in web context, it fails (probably at lint phase) with an error message about module fs not being found (which is expected, because it only exists in Electron context).

Is there a way to e.g. configure my linter to ignore fs module in web context? Or anyone here could suggest a better solution for this problem (preferably without loading a Node.js HTTP server under Electron)?

[lbssousa]

I guess I’ve found a possible wrokaround. By wrapping the fs.readFile() block around a try-catch statement, that quasar dev fatal error becomes a warning, and it doesn’t abort anymore.

So the full example will be written as follows:

import { Platform } from 'quasar'
(...)
function getJSON(path) {
  return new Promise((resolve, reject) => {
    if (Platform.is.electron) {
      try {
        const fs = require('fs')

        fs.readFile(path, (error, data) => {
          if (error) {
            reject(error)
          } else {
            resolve(data)
          }
        }
      } catch (error) {
        console.log('Failed to load module "fs"', error)
        throw error
      })
    } else {
      const request = new XMLHttpRequest()

      request.addEventListener('load', () => {
        if (request.status >= 200 && request.status < 400) {
          resolve(request.response)
        } else {
          reject(Error(request.statusText))
        }
      })

      request.addEventListener('error', () => {
        reject(Error("Network Error"))
      })

      request.open('GET', path, true)
      request.send()
    }
  }).then(JSON.parse).catch(error => {
    console.log('Failed to load JSON file', path, error)
    throw error
  })
}

[afd]

Add fs to module.exports.globals in .eslintrc.