web-dev-qa-db-ja.com

モジュールが見つかりませんHerokuにデプロイしたときにエラーが発生しました

GithubのアプリをHerokuにデプロイしようとしていますが、エラーが発生します：

./src/Index.tsxモジュールのエラーが見つかりません：エラー：「/ app/src」の「./ConfigureStore」を解決できません@。/ src/Index.tsx 9：23-50

HerokuにデプロイするとTypeScriptの問題のようです。

ただし、私のローカルでは完璧に機能し、webpackはバンドルを生成し、アプリは正常に実行されます。以下は私のwebpack.configです：

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-TypeScript-loader').CheckerPlugin;
const rootModulePath = "./src/";

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 webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
          }),
        new webpack.IgnorePlugin(/\.\/locale$/),
        new CheckerPlugin()        
    ],
    devtool: 'source-map',
    output: {
        path: __dirname,
        filename: './public/Dig.js'
    },
    module: {
        rules: [
            { test: /\.tsx?$/, include: /src/, use: ['awesome-TypeScript-loader?silent=true'] },
            //{ test: /\.ts$/, include: /src/, use: 'awesome-TypeScript-loader?silent=true' },
            { test: /\.html$/, use: 'html-loader?minimize=false' },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            { test: /\.css$/, use: ['style-loader','css-loader'] },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            // { test: /\.js/, loader: 'imports-loader?define=>false'}
        ]
    }    
};

package.json

{
  "name": "digeratia",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "npm run build && node server.js"
  },
  "author": "Vivek Singh",
  "dependencies": {
    "@types/history": "4.6.2",
    "@types/numeral": "0.0.22",
    "@types/react": "16.1.0",
    "@types/react-bootstrap": "^0.32.6",
    "@types/react-dom": "16.0.4",
    "@types/react-hot-loader": "3.0.6",
    "@types/react-redux": "5.0.15",
    "@types/react-router": "4.0.23",
    "@types/react-router-dom": "4.2.6",
    "@types/react-router-redux": "5.0.13",
    "@types/webpack": "4.1.3",
    "@types/webpack-env": "1.13.5",
    "awesome-TypeScript-loader": "4.0.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.0.0-alpha.6",
    "chai": "^4.1.2",
    "create-react-class": "^15.6.2",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "domain-task": "^3.0.3",
    "event-source-polyfill": "0.0.12",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "history": "4.7.2",
    "html-to-react": "1.3.3",
    "it": "^1.1.1",
    "json-loader": "0.5.7",
    "less": "^3.0.1",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.4",
    "node-noop": "1.0.0",
    "numeral": "^2.0.6",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-element-to-jsx-string": "^13.0.0",
    "react-hot-loader": "4.0.1",
    "react-image": "^1.0.1",
    "react-intl": "^2.4.0",
    "react-moment": "^0.7.0",
    "react-popper": "^0.9.2",
    "react-redux": "5.0.7",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "shelljs": "^0.8.1",
    "style-loader": "^0.20.3",
    "to-string-loader": "^1.1.5",
    "TypeScript": "2.8.1",
    "url-loader": "1.0.1",
    "webpack": "4.4.1",
    "webpack-hot-middleware": "2.21.2",
    "webpack-merge": "4.1.2",
    "xit": "^0.2.0",
    "abort-controller": "^1.0.0",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "babel-runtime": "^6.26.0",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.4",
    "css-to-string-loader": "^0.1.3",
    "react-render-html": "^0.6.0",
    "toastr": "^2.1.2",
    "webpack-cli": "^2.0.12"
  },
  "devDependencies": {
    "abort-controller": "^1.0.0",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "babel-runtime": "^6.26.0",
    "core-js": "^2.5.1",
    "css-loader": "^0.28.4",
    "css-to-string-loader": "^0.1.3",
    "react-render-html": "^0.6.0",
    "toastr": "^2.1.2",
    "webpack-cli": "^2.0.12"
  }
}

GithubコードのURLは ここ

長い間この問題に悩まされているので助けてください。

reactjstypescriptherokureact-tsx
7
User3250

したがって、問題はあなたが投稿したものではありません。 Index.tsまたはIndex.tsxがindex.tsまたはindex.tsxと同等であると想定しているため、この問題は修正されました。以下のスレッドを見ると

webpack：MacOSでは問題ありません、Linuxではローダーエラー

Macでビルドしても問題に直面しないと説明されています。そして、私はWindowsでも同じケースを想定しています。しかし、Linuxを使用すると、問題に直面します。それがここで起こっていることです。 HerokuボックスにSSH接続した場合

$ 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がファイルの名前変更やケースの変更を確認せず、名前が変更されたファイルをプッシュするためです。

したがって、本質的にエラーは、ビルドをCross-OS互換にするために、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
8
Tarun Lalwani

ファイルの名前はconfigureStoreですが、ConfigureStoreをインポートしようとすると、小文字の「c」が含まれているはずです。

お使いのマシンで動作しますが、Herokuでは大文字と小文字が区別されます。

1
Nir Ben-Yair

私はそれを動作させました..Herokuのようです ディレクトリインポート は動作していません。

したがって、インポートを「Index.ts」または「Index.tsx」で修飾すると、バンドルが完全に作成され、アプリは次のように動作し始めました。

From

import * as Store from './ConfigureStore'

To

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

将来誰かに役立つかもしれません。

1
User3250

欠落しているモジュールは開発依存ですか？このような場合、ローカルでは問題は発生しませんが、Herokuはdev-dependanciesをインストールせず、「Modulenotfound」エラーが発生します。これを修正するには、dev-dependancyをアンインストールし、-saveフラグを指定してモジュールを再インストールします。

0
Nati Kamusher