我正在尝试将我在 Github 上的应用程序部署到 Heroku，但出现错误:
ERROR in ./src/Index.tsx Module not found: Error: Can't resolve './ConfigureStore' in '/app/src' @ ./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
请帮忙解决这个问题很久了。
最佳答案
所以问题不是您发布的内容。问题已解决，因为您假设 Index.ts 或 Index.tsx 等同于 index.ts 或 index.tsx。如果你看下面的线程
webpack: fine on MacOS, loader errors on linux
它解释了在 Mac 上构建您不会遇到这个问题。我假设 Windows 也有同样的情况。但是对于 Linux，您将面临这个问题。这就是这里发生的事情。如果你 ssh 到 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
此外，如果你检查你的 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
关于reactjs - 在 Heroku 上部署时找不到模块错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49609719/