Javascript 未找到模块:在Heroku上部署时出错
我在Heroku上部署了react/node应用程序。 当我尝试部署它时,我在下面得到一个错误Javascript 未找到模块:在Heroku上部署时出错,javascript,node.js,reactjs,heroku,webpack,Javascript,Node.js,Reactjs,Heroku,Webpack,我在Heroku上部署了react/node应用程序。 当我尝试部署它时,我在下面得到一个错误 ERROR in ./client/app.js Module not found: Error: Can't resolve './src/components/nav/navContainer' in '/tmp/build_1a01b67ad5e485946724b1ce1337f75b/client' npm ERR! code ELIFECYCLE npm ERR! errn
ERROR in ./client/app.js
Module not found: Error: Can't resolve './src/components/nav/navContainer' in '/tmp/build_1a01b67ad5e485946724b1ce1337f75b/client'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build:prod: `cross-env NODE_ENV=production webpack --config=webpack.prod.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.EDIfm/_logs/2019-09-01T06_09_08_862Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 heroku-postbuild: `npm run build:prod`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.EDIfm/_logs/2019-09-01T06_09_08_877Z-debug.log
这条路是正确的。该应用程序在开发模式下运行良好。
我从网页包中删除了CaseSensitivePath插件,以防它导致错误。但它仍然失败,出现了同样的错误
app.js
webpack.prod.js
请注意,云中配置的路径目录将不同于您的本地目录 因此,要解决这个问题,有两种方法:
- 在将所有内容部署到heroku之前,先构建到prod模式
- 找到一种在云中解析路径的方法,以便webpack可以在云中运行和构建代码
更新:删除导航文件夹以修复错误。是否检查了目录和文件名“src/components/nav/navContainer”所有文件夹src、component和nav都应该是小写字母,文件名应该是“navContainer.jsx”,我在git repo中有两个文件夹“nav”和“nav”,这与我的代码编辑器中的代码不同。我删除了nav文件夹并再次添加以修复它。
import NavContainer from './src/components/nav/navContainer';
...
export const App = ({ messageShow, children }) => (
<div id="app absolute">
<NavContainer />
{messageShow !== null && (
<div className="flex justify-center">
<MessageBox />
</div>
)}
{children}
</div>
);
...
export default connect(
mapPropsToState,
null,
)(App);
const NavContainer = ({
...
}) => {
...
return (
<div className="nav relative">
...
</div>
);
};
...
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps,
)(NavContainer),
);
const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const NODE_ENV = process.env.NODE_ENV;
const devMode = NODE_ENV !== 'production';
const isTest = NODE_ENV === 'test';
const babelConfig = require('./.babelrc.js');
module.exports = {
output: {
filename: devMode ? 'bundle.js' : 'bundle.[hash].js',
chunkFilename: devMode
? '[name].lazy-chunk.js'
: '[name].lazy-chunk.[hash].js',
path: path.resolve(__dirname, 'public/dist'),
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss', 'css'],
},
node: {
fs: 'empty',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [
{
loader: 'babel-loader',
options: babelConfig,
},
],
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
{
loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
minimze: true,
sourceMap: devMode,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: {
indent: 'postcss',
plugins: [
autoprefixer({
browsers: ['last 1 versions', 'ie >= 11', '> 1%', 'not dead'],
}),
],
sourceMap: devMode,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: devMode,
includePaths: ['client/styles/main.scss'],
},
},
],
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
attrs: ['img:src'],
},
},
{
test: /\.(jpe?g|png|gif|ico)$/,
loader: 'file-loader',
options: {
name: devMode ? '[name].[ext]' : '[name].[hash].[ext]',
},
},
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: devMode ? '[name].[ext]' : '[name].[hash].[ext]',
},
},
],
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
plugins: [
new CleanWebpackPlugin(['public/dist']),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV),
},
}),
new HTMLWebpackPlugin({
template: './public/index.html',
favicon: './static/favicons/favicon.ico',
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[chunkhash].css',
chunkFilename: devMode ? '[id].css' : '[id].[chunkhash].css',
}),
new CopyWebpackPlugin([
{ from: `${__dirname}/static`, to: `${__dirname}/public/dist` },
]),
isTest
? new BundleAnalyzerPlugin({
generateStatsFile: true,
})
: null,
].filter(Boolean),
};
const merge = require('webpack-merge');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
const TerserPlugin = require('terser-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');
const baseConfig = require('./webpack.base');
const config = {
mode: 'production',
entry: './client/index.js',
devtool: 'source-map',
optimization: {
minimize: true,
minimizer: [
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: cssnano,
cssProcessorOptions: {
discardComments: { removeAll: true },
},
canPrint: true,
}),
new TerserPlugin({
test: /\.js(\?.*)?$/i,
exclude: /node_modules/,
terserOptions: {
ecma: 5,
compress: true,
output: {
comments: false,
beautify: false,
},
},
}),
],
runtimeChunk: {
name: 'manifest',
},
},
plugins: [new BrotliPlugin()],
};
module.exports = merge(baseConfig, config);
```