我正在尝试将我的应用程序部署在Github上，然后收到错误：
./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
请帮助我，因为我很长时间以来一直坚持这个问题。
答案 0 :(得分：8)
所以问题不在于你发布的是什么。问题得到解决，因为您认为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 config
$ 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
答案 1 :(得分：1)
您的文件名为configureStore，当您尝试导入ConfigureStore时，它应该是lowerCase“c”。
它适用于您的计算机，但Heroku区分大小写。
答案 2 :(得分：1)
我让它工作了......似乎Heroku Directory Import无效。
因此，当我使用＆＃39; Index.ts＆＃39;或者＆＃39; Index.tsx＆＃39;捆绑包创建完美，应用程序开始工作如下：
发件人
import * as Store from './ConfigureStore'
要
import * as Store from './ConfigureStore/Index';
将来可能对某人有帮助。
答案 3 :(得分：0)
缺少的模块是否依赖于开发人员？在这种情况下，您将不会在本地看到任何问题，而Heroku不会安装开发依赖项，并且会出现“找不到模块”错误。要解决此问题，只需卸载dev-dependency，然后使用--save标志重新安装模块
答案 4 :(得分：0)
出于某种原因，我刚刚添加了这个
"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。