在 Heroku 上部署时未找到模块错误
Posted
技术标签:
【中文标题】在 Heroku 上部署时未找到模块错误【英文标题】：Module not found Error when deployed on 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
请帮我解决这个问题很久了。
【问题讨论】：
【参考方案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.ts 或 Index.tsx 等效于 index.ts 或 index.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 区分大小写。
【讨论】：
不起作用。我之前已经考虑过了..:(以上是关于在 Heroku 上部署时未找到模块错误的主要内容，如果未能解决你的问题，请参考以下文章
未找到模块：错误：无法解析“@material-ui/core/styles”（部署到 heroku 时）
导入 Pyspark Delta Lake 模块时未找到模块错误