Модуль не найден Ошибка при развертывании на Heroku

Так что проблема не в том, что вы написали. Проблема устранена, поскольку вы предполагаете, что Index.ts или Index.tsx эквивалентны index.ts или index.tsx. Если вы посмотрите на ветку ниже

webpack: нормально на MacOS, ошибки загрузчика на linux

Это объясняет, что при сборке на Mac вы не столкнетесь с проблемой. И я предполагаю тот же случай с Windows. Но с Linux вы столкнетесь с проблемой. Вот что здесь происходит. Если вы ssh к коробке heroku

$ heroku ps:exec
Establishing credentials... done
Connecting to web.1 on ⬢ sleepy-sea-65699...
~ $ webpack -p --verbose
Hash: 8c20236f8268ce043077
Version: webpack 3.10.0
Time: 24904ms
            Asset     Size  Chunks                    Chunk Names
    ./docs/dig.js   608 kB       0  [emitted]  [big]  DIG
./docs/dig.js.map  4.25 MB       0  [emitted]         DIG
Entrypoint DIG [big] = ./docs/dig.js ./docs/dig.js.map
chunk    {0} ./docs/dig.js, ./docs/dig.js.map (DIG) 1.38 MB [entry] [rendered]
...
...
ERROR in ./src/configureStore.ts
Module 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

Как видите, файл с ошибкой имеет номер index, а не Index.

Также, если вы проверите конфигурацию репо

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

Вы можете видеть, что ignorecase установлено на true, что нехорошо, потому что тогда git не будет смотреть на переименования файлов и изменения случаев и нажимать переименованные файлы.

Таким образом, по сути, ошибка заключается в том, что ваш Index.ts должен index.ts сделать вашу сборку кросс-ОС совместимой.

Плагин с учетом регистра

Вы должны включить плагин, чувствительный к регистру, для вашей разработки, чтобы избежать таких проблем.

$ npm install --save-dev case-sensitive-paths-webpack-plugin

> [email protected] install /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact/node_modules/fsevents
> node install

[fsevents] Success: 
+ [email protected]
added 117 packages from 85 contributors and removed 3 packages in 9.661s

Обновите webpack.config.js, как показано ниже.

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'
          }),
 ....

Теперь при сборке вы увидите эти проблемы непосредственно в Windows/Mac.

sh-3.2$ npm run build

> [email protected] build /Users/tarun.lalwani/Desktop/tarunlalwani.com/tarunlalwani/workshop/ub16/so/DigeratiGlobalReact
> webpack -p

Hash: 3762a6deb22d9fabd37b
Version: webpack 3.10.0
Time: 12279ms
            Asset     Size  Chunks                    Chunk Names
    ./docs/dig.js   511 kB       0  [emitted]  [big]  DIG
./docs/dig.js.map  3.56 MB       0  [emitted]         DIG

ERROR in ./src/configureStore.ts
Module 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.tsx
npm ERR! code ELIFECYCLE
npm ERR! errno 2

Ваш файл называется configureStore, а вы пытаетесь импортировать ConfigureStore, он должен быть в нижнем регистре "c".

Он работает на вашем компьютере, но Heroku чувствителен к регистру.

У меня это работает. Кажется, на Heroku Импорт каталога не работает .

Следовательно, когда я уточнил свой импорт с помощью «Index.ts» или «Index.tsx», пакет был создан идеально, и приложение начало работать, как показано ниже:

От

import * as Store from './ConfigureStore'

Кому

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

Может кому пригодится в будущем.

Является ли отсутствующий модуль зависимостью от разработчиков? В таком случае вы не увидите никакой проблемы локально, пока Heroku не установит dev-зависимости, и вы получите ошибку «Модуль не найден». Чтобы это исправить, просто удалите dev-зависимость и переустановите модуль с флагом --save.

Я почему-то добавил это

"heroku-prebuild": "export NPM_CONFIG_PRODUCTION=false; export NODE_ENV=; NPM_CONFIG_PRODUCTION=false NODE_ENV=development npm install --only=dev --dev",
"heroku-postbuild": "export NPM_CONFIG_PRODUCTION=true; export NODE_ENV=production;

Я получил это из этого ответа

по умолчанию heroku удаляет ваши пакеты из раздела devDependencies после сборки. Возможно, что-то в вашем приложении зависит от пакетов, указанных в devDependencies. Приведенные выше сценарии npm пропускают очистку devDependencies.