【问题标题】:Module not found Error when deployed on Heroku在 Heroku 上部署时未找到模块错误
【发布时间】:2018-09-11 13:52:55
【问题描述】:

我正在尝试将我在 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代码地址为here

请帮我解决这个问题很久了。

【问题讨论】:

    标签: reactjs asp.net-mvc typescript heroku react-tsx


    【解决方案1】:

    我在部署到 Heroku 时遇到了这样的学校作业问题。如果其他人将来有任何问题,请确保在根目录中创建一个名为 .npmrc 的文件。将 production=false 添加到该文件,然后推送到 Heroku。

    【讨论】:

      【解决方案2】:

      由于某种原因,我刚刚添加了这个

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

      我从这个answer得到它

      默认情况下,heroku 在构建后会删除 devDependencies 下的包。您的应用程序中的某些内容可能取决于 devDependencies 中指定的包。上面的 npm 脚本跳过了清除 devDependencies。

      【讨论】:

        【解决方案3】:

        缺少的模块是开发依赖吗?在这种情况下,您不会在本地看到任何问题,而 Heroku 不会安装开发依赖项,并且您会收到“未找到模块”错误。要解决此问题,只需卸载 dev-dependancy 并使用 --save 标志重新安装模块

        【讨论】:

        • 不,与开发依赖无关。这是套管问题
        【解决方案4】:

        所以问题不在于您发布的内容。该问题已得到解决,因为您假设 Index.tsIndex.tsx 等效于 index.tsindex.tsx。如果你看下面的线程

        webpack: fine on MacOS, loader errors on 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

        如果你检查你的 repo 配置

        $ 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
        
        > 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 中直接看到这些问题

        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
        

        【讨论】:

        • 太棒了!感谢您的深入研究。因此,最终它出现了套管问题。不过我有一个问题,所以当我像 ./Stores 这样进行目录导入并忽略索引时,它应该可以工作,因为那时没有任何案例问题。
        • 你使用的是什么操作系统?
        • 我的是windows。当我尝试目录导入时,它在 Heroku 上不起作用
        • 您需要将每个 Index.ts 重命名为 index.ts,然后它才能在 Heroku 上运行。此外,您现在应该使用新的 repo,以避免 ignorecase 配置问题和弄乱历史记录。我建议从一个新的 repo 开始,不要在 git config 中启用 ignorecase
        • 另外你应该添加插件以确保以后不会发生这样的事情github.com/Urthen/case-sensitive-paths-webpack-plugin
        【解决方案5】:

        我让它工作了。似乎 Heroku Directory Import 不工作。

        因此,当我使用 'Index.ts' 或 'Index.tsx' 限定我的导入时,捆绑包被完美地创建并且应用程序开始如下工作:

        来自

        import * as Store from './ConfigureStore'
        

        收件人

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

        将来可能会对某人有所帮助。

        【讨论】:

        • 我部署了你的 Git 存储库,它在 heroku 上运行没有任何问题?
        • @TarunLalwani 是的,Git 存储库已根据上述更改进行了更新。因此它起作用了。
        • 你能提供不工作的提交吗?想换个角度去探索
        • @TarunLalwani 你能尝试删除 ''./Stores/Index';'从文件'configureStore'然后部署到Heroku?那么你应该得到错误。
        • 查看我发布的解释和答案
        【解决方案6】:

        您的文件名为 configureStore,当您尝试导入 ConfigureStore 时,它应该使用小写“c”。

        它可以在你的机器上运行,但 Heroku 区分大小写。

        【讨论】:

        • 不起作用。我之前已经考虑过了..:(
        猜你喜欢
        • 2020-01-04
        • 2017-06-07
        • 2021-03-17
        • 2015-08-31
        • 2014-10-06
        • 2019-01-27
        • 2014-03-22
        • 2016-12-25
        • 2021-08-17
        相关资源
        最近更新 更多