Astroturf causes errors when using persistent caching with Webpack 5

[lostfictions]

As discussed in #667.

Astroturf will cause errors when using Webpack 5's persistent cache. It wouldn't bother me too much if persistent caching simply didn't work for Astroturf, but as it stands these errors block the use of persistent caching entirely and require the user to turn it off. I thought I'd file a separate issue for this since #667 seems to concern persistent cache support for Astroturf, whereas this is about a blocking error.

Here's a minimal repro: https://github.com/lostfictions/repro-astroturf1-webpack5

To reproduce:

• Clone the repo and yarn install
• Run yarn start and open http://localhost:8080/ in your browser. Everything should work fine.
• Webpack will have emitted persistent cache files to node_modules/.cache/webpack.
• Close the watcher and open it again. You should get an error like this:

ERROR in ./src/index.js 2:0-52
Module not found: Error: Can't resolve './index-whatever.module.css' in 'repro-astroturf1-webpack5/src'
resolve './index-whatever.module.css' in 'repro-astroturf1-webpack5/src'
  using description file: repro-astroturf1-webpack5/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: repro-astroturf1-webpack5/package.json (relative path: ./src/index-whatever.module.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        repro-astroturf1-webpack5/src/index-whatever.module.css doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        repro-astroturf1-webpack5/src/index-whatever.module.css.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        repro-astroturf1-webpack5/src/index-whatever.module.css.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        repro-astroturf1-webpack5/src/index-whatever.module.css.wasm doesn't exist
      as directory
        repro-astroturf1-webpack5/src/index-whatever.module.css doesn't exist

webpack 5.24.2 compiled with 1 error in 191 ms
ℹ ｢wdm｣: Failed to compile.

Looks like it's trying to find materialized versions of the virtual modules, presumably to check whether they've changed and the cache needs to be invalidated. I'd hazard a guess this could be fixed by telling the cache manifest to check the original source files (ie. index.js in this case) instead.

[lostfictions]

@jquense Ahh, just found your long-running issue in webpack/webpack#11074 ... Looks like a few other pieces of tooling have had success moving away from virtual modules (marko-js/webpack#48, sveltejs/svelte-loader#151) in the past month or so, maybe there's a more obvious way forward now?

[jquense]

hmm i'm now very confused as to why our app doesn't exhibit this problem, thanks for the repro repo. I've considered the other approach in that issue but there are a lot of downsides to it that seem untenable but i need to try and spike it out again to see.

[jsg2021]

I'm hitting this as well.

[jquense]

@jsg2021 #667

[jsg2021]

@jquense so just add useAltLoader?

[jsg2021]

nice!