Модуль не найден ошибка при развертывании на Heroku
Я пытаюсь развернуть свое приложение на Github в Heroku, но получаю ошибку:
ошибка ./ src / Index.ЦХ Модуль не найден: ошибка: не удается разрешить"./ ConfigureStore ' in '/ app / src' @ ./ src / Index.tsx 9: 23-50
похоже на проблему с Typescript при развертывании на Heroku.
хотя, отлично работает в моем локальном и 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'}
]
}
};
пакета.в 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"
}
}
url-адрес кода github -здесь
пожалуйста, помогите, поскольку я застрял в этом вопросе с давних пор.
3 ответов
таким образом, проблема не в том, что вы опубликовали. Проблема исправлена, потому что вы предполагаете Index.ts
или Index.tsx
эквивалентно index.ts
или index.tsx
. Если вы посмотрите на ниже поток
webpack: отлично на MacOS, ошибки загрузчика на 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 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
ваш файл называется configureStore
, в то время как вы пытаетесь импортировать ConfigureStore
, он должен быть в нижнем регистре "c".
он работает на вашей машине, но Heroku чувствителен к регистру.
Я заставил его работать.. Похоже на Heroku Импорт Каталога не работает.
следовательно, когда я квалифицировал свой импорт с ' Index.индекс ТС "или".tsx ' пакет был создан идеально, и приложение начало работать, как показано ниже:
С
import * as Store from './ConfigureStore'
до
import * as Store from './ConfigureStore/Index';
может быть полезно кому-то в будущем.