fix(webpack): explicitly pass outputFileSystem to webpackDevMiddleware

[simplesmiler]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

I got hit by nuxt/typescript#145 a couple of days ago, and together with @crutch12 we were able to determine the reason.

It is not triggered in particular by lerna, @nuxt/typescript, and can also be reproduced with yarn.

The culprit happens to be in the interaction between @nuxt/webpack, webpack-dev-middleware and memory-fs, and how the package manager (e.g. npm or yarn) decides to dedupe them on disk.

In particular, webpack-dev-middleware@3.7.2 performs a check compiler.outputFileSystem instanceof MemoryFileSystem: https://github.com/webpack/webpack-dev-middleware/blob/v3.7.2/lib/fs.js#L112

1. When @nuxt/webpack and webpack-dev-middleware happen to "share" the deduped memory-fs (i.e. it is hoisted to a top of node_modules), then the check passes, and everything is snazzy.
2. When memory-fs happens to be "inlined" (i.e. another version of memory-fs is hoisted to the top of node_modules), then the check fails, and webpack-dev-middleware creates it's own instance of MemoryFileSystem to write to, and the original AsyncMFS created by @nuxt/webpack never gets populated with compiled files.

Reproduction is quite easy, you just have to have top level memory-fs dependency of a different version than the one used by @nuxt/webpack and webpack-dev-middleware:

# Start from empty folder
npm i nuxt@2.13.1 memory-fs@0.5.0
npx nuxt
# Open browser and see the error

A solution we were able to find is to explicitly pass file system instance through webpack-dev-middleware options instead of relying on it to extract the file system instance from the compiler instance.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-commenter]

Codecov Report

Merging #7613 into dev will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##              dev    #7613   +/-   ##
=======================================
  Coverage   70.28%   70.28%           
=======================================
  Files          88       88           
  Lines        3749     3749           
  Branches     1020     1020           
=======================================
  Hits         2635     2635           
  Misses        905      905           
  Partials      209      209           

Flag	Coverage Δ
#unittests	70.28% <ø> (ø)

Impacted Files	Coverage Δ
packages/webpack/src/builder.js	13.33% <ø> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b070e19...f369c19. Read the comment docs.

[pi0]

Thanks! LGTM. We have same fix for next (webpack5) branch :)