How to setup a Webpack alias that makes the distinction between my source code and node_modules code?

I'm trying to make a React Native project run in the browser using react-native-web. For that to compile, I had to configure Webpack to use the directories on my project src with aliases, like so:

alias: Object.assign({'react-native$': 'react-native-web','@react-native-community/async-storage': 'react-native-web','react-dom$': 'react-dom/profiling','scheduler/tracing': 'scheduler/tracing-profiling','../components': path.resolve(__dirname, '../src/components/'),'../screens': path.resolve(__dirname, '../src/screens/'),'../utils': path.resolve(__dirname, '../src/utils/'),    // etc})

Without the aliases for the directories of my projects code there, some React Native related node modules raise Module not found errors, like this one:

ERROR in ../node_modules/react-native-screens/src/screens.web.jsModule not found: Error: Can't resolve '../components/purchasableCoursesList' in '/Users/sousa/cfisp_client/node_modules/react-native-screens/src' @ ../node_modules/react-native-screens/src/screens.web.js 30:49-96 @ ../node_modules/@react-navigation/stack/lib/module/views/Screens.js @ ../node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js @ ../node_modules/@react-navigation/stack/lib/module/views/Stack/StackView.js @ ../node_modules/@react-navigation/stack/lib/module/index.js @ ../src/App.web.tsx @ ../index.web.ts

With the line '../components': path.resolve(__dirname, '../src/components/'), the error above disappears. However, some of the directories on my project have very generic names, like "utils". Apparently, Webpack is resolving every occurrence of '../utils' in node_modules with my utils directory, which is causing conflicts, like the one revealed by this error:

ERROR in ../node_modules/inline-style-prefixer/lib/plugins/transition.jsModule not found: Error: Can't resolve '../utils/capitalizeString' in '/Users/sousa/cfisp_client/node_modules/inline-style-prefixer/lib/plugins' @ ../node_modules/inline-style-prefixer/lib/plugins/transition.js 16:24-60 @ ../node_modules/react-native-web/dist/modules/prefixStyles/static.js @ ../node_modules/react-native-web/dist/modules/prefixStyles/index.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/compile.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/createStyleResolver.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/styleResolver.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/css.js @ ../node_modules/react-native-web/dist/exports/View/index.js @ ../node_modules/react-native-web/dist/index.js @ ../index.web.ts

The module inline-style-prefixer has a directory 'utils', and it knows where it is. Webpack is confusing it because our project has a directory of the same name for which we need an alias.

Our workaround, for now, is to rename our utils directory to MyProjectName_utils. The problem goes away but that is obviously not a good solution.

I feel like I'm using Webpack/react-native-web wrong here. Any thoughts will be much appreciated!