在Heroku上部署时找不到模块错误 [英] Module not found Error when deployed on Heroku

问题描述

我正在尝试将我的应用程序在Github上部署到Heroku，但出现错误:

I am trying to deploy my app on Github to Heroku but getting error:

./src/Index.tsx中的错误 找不到模块:错误:无法解析"/app/src"中的"./ConfigureStore" @ ./src/Index.tsx 9:23-50

ERROR in ./src/Index.tsx Module not found: Error: Can't resolve './ConfigureStore' in '/app/src' @ ./src/Index.tsx 9:23-50

当我在Heroku上部署时，好像是Typescript问题.

Seems like Typescript issue when I deploy on Heroku.

尽管如此，但在我的本地环境中运行完美，并且webpack生成了包，并且应用程序运行良好. 下面是我的webpack.config:

Although, works perfect in my local and webpack generates bundles and app runs fine. Below is my 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代码网址为此处

The github code url is here

请长期提供帮助，以解决此问题.

Please help as am stuck on this issue since long time.

推荐答案

所以问题不是您发布的内容.由于您假定Index.ts或Index.tsx等效于index.ts或index.tsx，因此该问题已得到解决.如果您看下面的线程

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:适用于MacOS，适用于Linux上的加载器错误

它说明在Mac上构建您不会遇到此问题.我也认为Windows也是如此.但是使用Linux，您将面临问题.那就是这里正在发生的事情.如果您使用sheroku框

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: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

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

您会看到ignorecase设置为true，这不好，因为git不会查看文件重命名和大小写更改，也不会推送重命名的文件.

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.

从本质上讲，错误是您的Index.ts应该index.ts以使您的构建跨OS兼容

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

区分大小写的插件

您应该为开发启用区分大小写的插件，以避免此类问题

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.2
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中看到这些问题

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 -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

这篇关于在Heroku上部署时找不到模块错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！