How to ignore e.g. the "fs" module in Quasar's webpack

Question

I'm bringing in a few modules to a quasar app, that were designed with node.js in mind. Some of them are doing e.g. require('fs') (in fact they are more likely doing require('fs-extra') (https://www.npmjs.com/package/fs-extra) but I'm assuming the answer I am after will be the same?)

When I run yarn quasar dev, starting it in chromium, I get the following error:

vue-router.esm.js?8c4f:1924 TypeError: Cannot read property 'match' of undefined
    at patch (polyfills.js?cce3:31)
    at patch (graceful-fs.js?dadc:70)
    at Object.eval (graceful-fs.js?dadc:29)
    at eval (graceful-fs.js:281)
    at Object../src/statics/qqnlp/node_modules/graceful-fs/graceful-fs.js (0.js:1750)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (index.js?91e5:4)
    at Object../src/statics/qqnlp/node_modules/fs-extra/lib/fs/index.js (0.js:1512)
    at __webpack_require__ (app.js:770)

This is just noise, because the functions, that I am using, in those modules will not use any file system functions in the webapp version. (When building for Electron they might get used, so we are planning to wrap any such calls in conditionals, at that time.)

The error message in Firefox is very different, but still out of vue-router.esm.js:

TypeError: "process.version is undefined"

 patch polyfills.js:31
 patch graceful-fs.js:70
 <anonymous> graceful-fs.js:29
 <anonymous> graceful-fs.js:281
 js 0.js:1750
 __webpack_require__ app.js:770
 fn app.js:130
 ...another 30 lines of similar stuff...

(Though the errors look very different, it is the same require() call triggering it, as if I comment it out, the web app works in both Firefox and Chromium.)

So, I'm thinking if I tell webpack to just ignore the 'fs-extra' module, this problem might go away?

And I think webpack offers ignorePlugin for exactly this kind of thing?

What I cannot work out is where to put that code in the Quasar system? And in such a way that it only affects the web app version and not the Electron version.

By the way, the modules in question use require() and module.exports=..., and to get this far I changed babel.config.js to look like this, based on reading https://stackoverflow.com/a/52415747/841830

module.exports = {
  sourceType: "unambiguous",
  presets: [
    '@quasar/babel-preset-app'
  ]
}

score 3 · Accepted Answer · answered Aug 27 '19 at 12:07

I was forced to come back to this, and worked it out after a lot of trial and error.

Step 1: You need to add 'null-loader' to your project, but only as a development dependency. E.g. if using yarn:

yarn add --dev null-loader

Step 2: In quasar.conf.js, in the build: section, find the extendWebpack (cfg){...} block. Then add this inside it (I've put it just before the existing rule):

cfg.module.rules.push({
  test: /(fs-extra|graceful)/,
  loader: "null-loader"
  })

This is saying whenever it tries to load a module with those strings anywhere in the module name, use null-loader to suppress it.

Some variations on the test work. Even though the modules I'm using only directly load fs-extra, never graceful-fs. (Incidentally, /(fs-extra|graceful-fs)/ does not work... didn't manage to track down why.)

Trying to restrict the regex with anchors, even just $ at the end, fails. This opens the risk of accidentally excluding other modules (e.g. "xfs-extra", "fs-extract", etc., etc.), but I've not worked out the magic trick yet.

Finally, if you just need this config to apply to single-page-applications, and not to other quasar modes, you can write it like this:

build: {
  ...
  extendWebpack (cfg) { 
    if(ctx.mode.spa){
      cfg.module.rules.push({
        test: /(fs-extra|graceful)/,
        loader: "null-loader"
        })
      }
  ...

Aside: My guess that ignorePlugin() was what I wanted was wrong (or maybe that is another way to do it??). Another distraction was setting cfg.node['fs-extra']='empty' or cfg.node=false or any of a hundred variations on that. It is being used, because changing it changes the error message. But even though "empty" is supposed to make an empty object, it still tries to read it and all its dependencies, and so still ends up complaining.

How to ignore e.g. the "fs" module in Quasar's webpack

1 Answers1