- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 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! 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
路径是正确的。该应用程序在开发模式下运行良好。我从 webpack 中删除了 CaseSensitivePath 插件,以防它导致错误。但它仍然失败并出现同样的错误。
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);
```
最佳答案
请注意,在云端配置的路径目录与本地不同
所以要解决这个问题,您有两种方法:
在将所有内容部署到 heroku 之前构建到 prod 模式
找到一种在云端解析路径的方法,以便 webpack 可以在云端运行和构建您的代码
更新:删除导航文件夹以修复错误。
关于javascript - 找不到模块 : error when deployed on Heroku,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57743718/
例如,我有一个父类Author: class Author { String name static hasMany = [ fiction: Book,
代码如下: dojo.query(subNav.navClass).forEach(function(node, index, arr){ if(dojo.style(node, 'd
我有一个带有 Id 和姓名的学生表和一个带有 Id 和 friend Id 的 Friends 表。我想加入这两个表并找到学生的 friend 。 例如,Ashley 的 friend 是 Saman
我通过互联网浏览,但仍未找到问题的答案。应该很容易: class Parent { String name Child child } 当我有一个 child 对象时,如何获得它的 paren
我正在尝试创建一个以 Firebase 作为我的后端的社交应用。现在我正面临如何(在哪里?)找到 friend 功能的问题。 我有每个用户的邮件地址。 我可以访问用户的电话也预订。 在传统的后端中,我
我主要想澄清以下几点: 1。有人告诉我,在 iOS 5 及以下版本中,如果您使用 Game Center 设置多人游戏,则“查找 Facebook 好友”(如与好友争夺战)的功能不是内置的,因此您需要
关于redis docker镜像ENTRYPOINT脚本 docker-entrypoint.sh : #!/bin/sh set -e # first arg is `-f` or `--some-
我是一名优秀的程序员,十分优秀!