Getting "this.outputFileSystem.join is not a function" when used in webpack outputFileSystem

[OrenMe]

Hi, I'm getting this exception when using as the output of webpack

const mfs = require("memfs");
compiler.outputFileSystem = mfs;
compiler.run((err, stats) => {
  //getting error
});

Error:

TypeError: this.outputFileSystem.join is not a function
    at writeOut (.../node_modules/webpack/lib/Compiler.js:333:48)
    at asyncLib.forEachLimit (.../node_modules/webpack/lib/Compiler.js:426:7)
    at objectIteratorWithKey (.../node_modules/neo-async/async.js:3509:9)
    at timesSync (.../node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (.../node_modules/neo-async/async.js:3463:5)
    at emitFiles (.../node_modules/webpack/lib/Compiler.js:321:13)
    at Immediate.<anonymous> (.../node_modules/memfs/lib/volume.js:666:17)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)

Not really sure what is the issue, but pretty sure join is not in the memfs API.
Can I use this as the outputFileSystem for webpack?

[adenine-dev]

I second this, just ran into the same problem, currently working on a hack but I would like if this was implemented into the library.

[rangoo94]

Actually, this bug is a part of memory-fs implementation: webpack/memory-fs#67

Such method shouldn't be implemented inside of FS (as it's not part of standard, and it has nothing to do with it). Instead of that, I suggest to monkey patch file system used for Webpack:

const joinPath = require('memory-fs/lib/join')

function ensureWebpackMemoryFs (fs) {
  // Return it back, when it has Webpack 'join' method
  if (fs.join) {
    return fs
  }

  // Create FS proxy, adding `join` method to memfs, but not modifying original object
  const nextFs = Object.create(fs)
  nextFs.join = joinPath

  return nextFs
}

// Usage with Webpack:

function buildWebpackCompiler (fs, webpackConfig) {
  const webpackFs = ensureWebpackMemoryFs(fs)

  const compiler = webpack(webpackConfig)

  compiler.outputFileSystem = webpackFs
  compiler.resolvers.context.fileSystem = webpackFs

  return compiler
}

Using Object.create you will not modify the FS instance, but Webpack will have access to all required methods.

[OrenMe]

Thanks @rangoo94 this is what I ended doing.
I’ll close this and maybe you should add a sticky note on this as I believe this might get a lot.
Thanks for referencing the webpack issue!

[conorkenahan]

Actually, this bug is a part of memory-fs implementation: webpack/memory-fs#67

Such method shouldn't be implemented inside of FS (as it's not part of standard, and it has nothing to do with it). Instead of that, I suggest to monkey patch file system used for Webpack:

const joinPath = require('memory-fs/lib/join')

function ensureWebpackMemoryFs (fs) {
  // Return it back, when it has Webpack 'join' method
  if (fs.join) {
    return fs
  }

  // Create FS proxy, adding `join` method to memfs, but not modifying original object
  const nextFs = Object.create(fs)
  nextFs.join = joinPath

  return nextFs
}

// Usage with Webpack:

function buildWebpackCompiler (fs, webpackConfig) {
  const webpackFs = ensureWebpackMemoryFs(fs)

  const compiler = webpack(webpackConfig)

  compiler.outputFileSystem = webpackFs
  compiler.resolvers.context.fileSystem = webpackFs

  return compiler
}

Using Object.create you will not modify the FS instance, but Webpack will have access to all required methods.

@rangoo94 where/to which file should this monkey patch be added? i'm running into this error on npm start on webpack 4.47.0.

[rangoo94]

@conorkenahan, I used it for the FS instance passed to the compiler via outputFileSystem and resolvers.context.fileSystem (as in the example above).

I'm not sure if it will work for you - my case was quite uncommon, I did want to get the output from memory and into memory, to avoid writes in the real filesystem. If that's what you expect, I think that it should work for you 👍