[英]Module not found: error when deployed on Heroku
I have a react/ node app deployed on Heroku. 我在Heroku上部署了一个react / node应用程序。 When I try to deploy it, I am getting an error below. 当我尝试部署它时,下面出现错误。
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
The path is correct. 路径正确。 The app works fine in dev mode. 该应用在开发模式下可以正常运行。 I removed CaseSensitivePath plugin from webpack, in case if it causes an error. 我从webpack中删除了CaseSensitivePath插件,以防它导致错误。 But it still fails with same error. 但是它仍然失败,并显示相同的错误。
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);
```
Please note that path directory configure in the cloud will be different from your local 请注意,云中配置的路径目录将与您本地的路径目录不同
So to solve this issue you have 2 ways: 因此,要解决此问题,您有2种方法:
Build to prod mode before deploy everything to heroku 在将所有内容部署到heroku之前构建为生产模式
Find a way to resolve path in the cloud so that webpack can run and build your code in cloud 寻找一种解决云中路径的方法,以便Webpack可以在云中运行并构建代码
Update: Delete a nav folder to fix an error. 更新:删除导航文件夹以修复错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.