Error Running npm run dev in Vagrant and VirtualBox: Cannot find module 'webpack'

To give a little context of my problem, here's my local setup:

Vagrant 2.2.16 VirtualBox 6.1.26 Ubuntu 20.04 LTS npm v7.20.6 node v16.6.6

At first, I had a very hard time installing webpack-cli which gave me this error:

npm ERR! code EPROTO
npm ERR! syscall symlink
npm ERR! path ../acorn/bin/acorn
npm ERR! dest /vagrant/my_project/frontend/node_modules/.bin/acorn     
npm ERR! errno -71
npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/vagrant/my_project/frontend/node_modules/.bin/acorn'
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-08-16T05_40_20_295Z-debug.log

Until I successfully installed it with the following commands:

sudo npm install -g save-dev webpack-cli

Running sudo webpack-cli also gave me this:

assets by status 0 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each
environment.
You can also set it to 'none' to disable any default behavior. Learn more: hts://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/vagrant/my_project/frontend'
resolve './src' in '/vagrant/my_project/frontend' 
  using description file: /vagrant/my_project/frontend/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration 
    using description file: /vagrant/my_project/frontend/package.json (relative path: ./src) 
      no extension
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.js doesn't exist 
      .json
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
    /vagrant/my_project/frontend/src.wasm doesn't exist
      as directory
        existing directory /vagrant/my_project/frontend/src
          using description file: /vagrant/my_project/frontend/package.on (relative path: ./src)
            using path: /vagrant/my_project/frontend/src/index
              using description file: /vagrant/my_project/frontend/packe.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index doesn't exist 
        .js
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.js doesn't exist 
        .json
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
          /vagrant/my_project/frontend/src/index.wasm doesn't exist

webpack 5.50.0 compiled with 1 error and 1 warning in 150 ms

But I ignored it and continued installing other packages such as babel and react using npm install -g.

Now after setting-up my project and running this command:

sudo npm run dev

I got the following error:

> [email protected] dev
> webpack --mode development --watch

[webpack-cli] Failed to load '/vagrant/my_project/frontend/webpack.config.js' config
[webpack-cli] Error: Cannot find module 'webpack'
Require stack:
- /vagrant/my_project/frontend/webpack.config.js
- /usr/lib/node_modules/webpack-cli/lib/webpack-cli.js
- /usr/lib/node_modules/webpack-cli/lib/bootstrap.js
- /usr/lib/node_modules/webpack-cli/bin/cli.js
- /usr/lib/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/vagrant/my_project/frontend/webpack.config.js:2:17)
    at Module._compile (/usr/lib/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/vagrant/my_project/frontend/webpack.config.js',
    '/usr/lib/node_modules/webpack-cli/lib/webpack-cli.js',
    '/usr/lib/node_modules/webpack-cli/lib/bootstrap.js',
    '/usr/lib/node_modules/webpack-cli/bin/cli.js',
    '/usr/lib/node_modules/webpack/bin/webpack.js'
  ]
}

By the way, here's the content of my webpack.config.js file:

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

I think this has to do with symbolic links but I don't want to spend hours trying to debug something I don't understand. I just hope someone can find and answer this.