Receiving 'Error: Can't resolve ' when attempting to use a custom built module locally

Question

I am attempting to import a module that I have created locally and linked / installed to another module which is built and run via webpack.

I have used a variety of methods to integrate the custom module into the other module:

1. npm link the custom module to create a symbolic link that appears in the node_modules directory of the other module
2. npm install <local_absolute_path> the custom module to install it
3. Use wml (https://github.com/wix/wml) in order to copy changed files in the custom module to node_modules
4. Published the custom module to npm and then installed it in the other module

All of these methods still resulted in webpack and Flow displaying the Cannot resolve errors

NPM version: 6.9.1-next.0 node version: 8.8.1

Here is the package.json file for the custom module:

{
  "name": "custom_module_name",
  "version": "2.3.0",
  "repository": {
    "type": "git",
    "url": "-----"
  },
  "license": "UNLICENSED",
  "engines": {
    "node": ">=10.10.0",
    "npm": ">=6.4.1"
  },
  "ava": {
    "files": [
      ".test/**/*.js"
    ],
    "require": [
      "./test/helpers/config.js",
      "./test/helpers/utils.js"
    ],
    "babel": {
      "testOptions": {
        "babelrc": false
      }
    },
    "sources": [
      ".dist/**/*"
    ],
    "serial": true,
    "verbose": true,
    "failFast": false,
    "color": true,
    "concurrency": 1,
    "failWithoutAssertions": false,
    "tap": false,
    "timeout": "180s"
  },
  "nightmare": {
    "doc": true,
    "show": true,
    "openDevTools": {
      "mode": "detach"
    },
    "executionTimeout": 10000,
    "waitTimeout": 120000,
    "webPreferences": {
      "partition": "nopersist"
    },
    "switches": {
      "ignore-certificate-errors": true
    },
    "show_console_logging": false
  },
  "glslify": {
    "transform": [
      "glslify-import"
    ]
  }
}

Here is the webpack.common.js file for the other module that attempts to import the custom module:

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const FlowWebpackPlugin = require('flow-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['babel-polyfill', 'react', 'react-dom'],
    annotationService: glob.sync('./ClientScripts/---/*.js'),
    sass: './sass/main.scss'
  },
  output: {
    path: path.join(__dirname, 'reactDist'),
    filename: 'js/[name].js',
    publicPath: '/---/',
    sourceMapFilename: 'map/[name].map'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  resolve: {
    alias: {
      Interfaces: path.resolve(__dirname, 'ClientScripts/Interfaces/'),
      "custom_module_name": path.resolve(__dirname, 'node_modules/custom_module_name/')
    },
    symlinks: false
  },
  target: 'web',
  node: {
    fs: "empty"
  },
  externals: {
    'winston': 'require("winston")' // https://stackoverflow.com/questions/37840566/how-do-i-get-winston-to-work-with-webpack/37841103
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.env$/, loader: "file-loader?name=index.[ext]", exclude: [/node_modules/] },
      {
        test: /\.scss$|\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader",
            options: {
              minimize: true
            }
          },'sass-loader']
        })
      },
      { test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader?name=img/[name].[ext]?',
        options: {
          name (file) {
            if (process.env.environment === 'prod') {
              return '[path][name].[hash].[ext]'
            }

            return '[path][name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'css/timeline.[md5:contenthash:hex:20].css', disable: false, allChunks: true }),
    new FlowWebpackPlugin()
  ]
}

And here is my .flowconfig

[ignore]
.*/node_modules/flow-webpack-plugin/.*
.*/node_modules/custom-module-name/.*
.*/node_modules/custom-module-name/**/test/.*
.*/node_modules/.*\.json$
.*/node_modules/\.staging/.*

[libs]
flow-typed

[options]
module.name_mapper='^Interfaces\/\(.*\)$' -> '<PROJECT_ROOT>/ClientScripts/Interfaces/\1'
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.svg
module.file_ext=.json

The two errors I have constantly received are:

ERROR in ./ClientScripts/-/DashboardGrid.jsx
Module not found: Error: Can't resolve 'custom_module_name' in '-/ClientScripts/-/components'

which I believe comes from webpack

ERROR in Flow validation
Error ------------------------------------------ ClientScripts/-/DashboardGrid.jsx:11:22

Cannot resolve module custom_module_name.

      8| const ReactGridLayout = WidthProvider(RGL);
      9|
     10| // AKDV
     11| import { Test } from 'custom_module_name';

which comes from Flow

I am assuming the issue stems from the custom module setup itself...any idea what might be wrong with it?