Module not found Error when deployed on Heroku

So the issue is not what you posted it is. The issue got fixed because you assume Index.ts or Index.tsx is equivalent to index.ts or index.tsx. If you look at the below thread

webpack: fine on MacOS, loader errors on linux

It explains that building on Mac you wont face the issue. And I assume the same case with Windows as well. But with Linux you will face the issue. That is what is happening here. If you ssh to the heroku box

$ heroku ps:execEstablishing credentials... doneConnecting to web.1 on ⬢ sleepy-sea-65699...~ $ webpack -p --verboseHash: 8c20236f8268ce043077Version: webpack 3.10.0Time: 24904ms            Asset     Size  Chunks                    Chunk Names    ./docs/dig.js   608 kB       0  [emitted]  [big]  DIG./docs/dig.js.map  4.25 MB       0  [emitted]         DIGEntrypoint DIG [big] = ./docs/dig.js ./docs/dig.js.mapchunk    {0} ./docs/dig.js, ./docs/dig.js.map (DIG) 1.38 MB [entry] [rendered]......ERROR in ./src/configureStore.tsModule not found: Error: Can't resolve './Stores' in '/app/src'resolve './Stores' in '/app/src'  using description file: /app/package.json (relative path: ./src)    Field 'browser' doesn't contain a valid alias configuration  after using description file: /app/package.json (relative path: ./src)    using description file: /app/package.json (relative path: ./src/Stores)      no extension        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores is not a file      .js        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores.js doesn't exist      .jsx        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores.jsx doesn't exist      .ts        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores.ts doesn't exist      .tsx        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores.tsx doesn't exist      .css        Field 'browser' doesn't contain a valid alias configuration        /app/src/Stores.css doesn't exist      as directory        existing directory          using path: /app/src/Stores/index            using description file: /app/package.json (relative path: ./src/Stores/index)              no extension                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index doesn't exist              .js                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index.js doesn't exist              .jsx                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index.jsx doesn't exist              .ts                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index.ts doesn't exist              .tsx                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index.tsx doesn't exist              .css                Field 'browser' doesn't contain a valid alias configuration                /app/src/Stores/index.css doesn't exist

As you can see the case of the file in error is index and not Index

Also if you check you repo config

$ cat .git/config[core]    repositoryformatversion = 0    filemode = true    bare = false    logallrefupdates = true    ignorecase = true    precomposeunicode = true

You can see the ignorecase is set to true, which is not good, because then git won't look at the file renames and cases changes and push renamed files.

So essentially the error is that your Index.ts should index.ts to make your build Cross-OS compatible

Case sensitive plugin

You should enable the case sensitive plugin for you development to avoid such issues

$ npm install --save-dev case-sensitive-paths-webpack-plugin> fsevents@1.1.3 install /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/node_modules/fsevents> node install[fsevents] Success: + case-sensitive-paths-webpack-plugin@2.1.2added 117 packages from 85 contributors and removed 3 packages in 9.661s

Update your webpack.config.js like below

const path = require('path');const webpack = require('webpack');const merge = require('webpack-merge');const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;const rootModulePath = "./src/";const rootBundlePath = "./src/bundle/";const isDevBuild = true;var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');module.exports = {    stats: { modules: false },    resolve: {        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']    },    entry: {        'DIG': rootModulePath + "Index.tsx"    },    externals: {        jQuery: 'jQuery'      },      node: {        fs: 'empty'      },    plugins: [        new CaseSensitivePathsPlugin(),        new webpack.ProvidePlugin({            '$': 'jquery',            'jQuery': 'jquery'          }), ....

Now when you build you will see these issues directly in Windows/Mac as well

sh-3.2$ npm run build> digeratiaglobal@1.0.0 build /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact> webpack -pHash: 3762a6deb22d9fabd37bVersion: webpack 3.10.0Time: 12279ms            Asset     Size  Chunks                    Chunk Names    ./docs/dig.js   511 kB       0  [emitted]  [big]  DIG./docs/dig.js.map  3.56 MB       0  [emitted]         DIGERROR in ./src/configureStore.tsModule not found: Error: [CaseSensitivePathsPlugin] `/Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/src/Stores/index.ts` does not match the corresponding path on disk `Index.ts`. @ ./src/configureStore.ts 6:15-34 @ ./src/Index.tsxnpm ERR! code ELIFECYCLEnpm ERR! errno 2

I got it working.. Seems on Heroku Directory Import is not working.

Hence, when I qualified my import with 'Index.ts' or 'Index.tsx' the bundle got created perfect and app started to work as below:

From

import * as Store from './ConfigureStore'

To

import * as Store from './ConfigureStore/Index';

Might be helpful to someone in future.

Your file is called configureStore, while you try to import ConfigureStore, it should be with lowerCase "c".

It works on your machine but Heroku is case sensitive.