Compatiblity issue with Create React App not allow import outside of src/

[bwv850]

Background: Create React App comes with a ModuleScopePlugin which ensures that relative imports from app's source directories don't reach outside of it, meaning whatever you're importing has to be either in src/ or node_modules.

But our plugin node-polyfill-webpack-plugin uses webpack require.resolve, which returns the absolute path of packages

If we trying to use console or path polyfill with CRA

function App() {
  console.log('Hello world');
  path.join('./assets/img', 'logo.png');
  
  return (
    <div className="App">
    ....
    </div>
  );
}

CRA would report error

I created a reproduce repository here node-polyfill-webpack-plugin-cra-reproduce

Some other info

• yarn version: 1.22.15
• node version: v16.16.0

[bwv850]

If I am right, what would be a good approach to address this issue? I am thinking

• If you're using CRA, then after eject, you need to delete ModuleScopePlugin from webpack configuration. We can add this to README

code

• Delete ModuleScopePlugin in NodePolyfillPlugin code automatically, if possible. Since one contradicts the other.

• I am no Webpack expert, is there a require.resolve alternative that can return relative path instead of absolute path?

[UncleJart]

This issue is relevant for Linux or Unix platforms (e.g. Ubuntu, Mac OS), on Windows everything works properly. This is not node-polyfill-webpack-plugin or ModuleScopePlugin problem.

There is open issue on the topic in enhanced-resolve library repo - webpack/enhanced-resolve#308 Fallback node module been resolved with absolute path which starts with / (filesystem root) on Linux/Unix. On Windows it also resolves with absolute path, but it starts with drive letter, and so there everything works properly.

Edit: Actually it may be ModuleScopePlugin problem, because webpack documentation states that On non-Windows systems these requests are resolved as an absolute path first, so enhanced-resolve works as intended which means that ModuleScopePlugin just does not handle properly this case as it was written before roots option was introduced in webpack 4.44.

[yashspr]

Any solution for this without having to eject from CRA?

[zdu-strong]

Maybe you can refer to my project(https://github.com/zdu-strong/Technical_Backup/tree/master/react).
It uses both react-app-rewired and node-polyfill-webpack-plugin to make the configuration effective.