Resolving root path in RootsPlugin

[bryanchen-d]

Hi, while I am tracing down an issue from react-dev-utils/ModuleScopePlugin, I found that line 37 in RootsPlugin is causing different behavior between linux and windows as it only check for the / path separator:

enhanced-resolve/lib/RootsPlugin.js

Lines 34 to 42 in d1a3cb6

	.tapAsync("RootsPlugin", (request, resolveContext, callback) => {
	const req = request.request;
	if (!req) return callback();
	if (!req.startsWith("/")) return callback();
	forEachBail(
	this.roots,
	(root, callback) => {
	const path = resolver.join(root, req.slice(1));

Also I am curious about when the request path is an absolute path starting with '/', why we want to trim off the '/' and treat it as a relative path and concatenate it with another root path?

---- A simple setup to repro the issue

1. Follow https://webpack.js.org/guides/getting-started/ to setup a simple env of webpack
2. in index.js add some code using crypto like

import crypto from "crypto";
console.log(crypto.createHash("sha256").digest("hex"));

3. Add a webpack.config.js with content

const path = require('path');
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
module.exports = {
  entry: './src/index.js',
  resolve:{
      fallback:{
        crypto:require.resolve("crypto-browserify"),
        buffer:require.resolve("buffer"),
        stream: require.resolve("stream-browserify")
      },
      plugins: [
        new ModuleScopePlugin(path.resolve(__dirname, "./src"))
      ],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  }
};

4. Build by running npx webpack

Then I am seeing

**ERROR** in ./src/index.js 2:0-28
Module not found: Error: You attempted to import /home/brchen/repos/webpack-test/node_modules/crypto-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

[alexander-akait]

Can you provide example how we can reproduce it?

[bryanchen-d]

Can you provide example how we can reproduce it?

Thanks for the quick turnaround! I don't have a simple repro for now as my project's webpack config involves quite some plugins. Some info for the issue: I am working on upgrading to [email protected], [email protected], and there is a fallback config for crypto:
resolve.fallback.crypto=require.resolve("crypto-browserify").
It builds well for me on windows, but it failed on linux that the ModuleScopePlugin throws error complaining the /home/.../node_modules/crypto-browserify/index.js is outside of the ../src/ folder.

I will see if I can get a simple setup to repro the issue and update here. Thanks again.

[alexander-akait]

Yep, feel free to ping me

[bryanchen-d]

Yep, feel free to ping me

Updated with a repro, please check.

[alexander-akait]

hm, looks line ModuleScopePlugin should ignore request to node_modules, but why do you use this plugin (i.e. why CRA uses), we have the restrictions options, it can be used instead this plugin

[bryanchen-d]

Oh good to know that, the project was originally created with create-react-app which brings in the ModuleScopePlugin at the beginning, I can try out the new setting.

Regarding the error, from what I found, the ModuleScopePlugin did try to ignore those requests as in
https://github.com/facebook/create-react-app/blob/5cedfe4d6f19a5f07137ac7429f57dfe923d93b5/packages/react-dev-utils/ModuleScopePlugin.js#L30-L38

However the RootsPlugin returns a wrong path after it concatenates two root paths, and then later resolver cannot find the description file (package.json) of the 'crypto-browserify' package, that seems to set the descriptionFileRoot back to the project folder, which escape ModuleScopePlugin's check above.

[alexander-akait]

Maybe ModuleScopePlugin's plugin should use resolved hook https://github.com/webpack/enhanced-resolve/blob/main/lib/ResolverFactory.js#L303... Anyway if you know how to fix feel free to send a fix

[bryanchen-d]

For the build error I have workarounds anyway. For a fix here in RootsPlugin it seems to me that it should simply return callback() when the request.path is already a rooted path, so I am trying to understand the reasons of existing logic.

[alexander-akait]

Note - you can have multiples roots

[bryanchen-d]

You mean multiple roots as in this.roots ? But regardless what roots we have, I think in this case the request has specified a rooted path, so actually we should just honor that, right?

[alexander-akait]

Need check, just information 😄 I can look at this at weekends, feel free to ping me if you don't found solution