找不到模块：在Heroku上部署时出错

Question

我在Heroku上部署了一个react /节点应用程序。 当我尝试部署它时，下面出现错误。

<h3><%=post.title%></h3>

<p>
<%=post.content.substring(0, 200) + " ..."%>
<a href="/posts/<%=post._id%>">Read More</a>
</p>

路径正确。该应用在开发模式下可以正常运行。 我从webpack中删除了CaseSensitivePath插件，以防它导致错误。但是它仍然失败，并显示相同的错误。

app.js

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

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);

webpack.base.js

const NavContainer = ({
...
}) => {
...

  return (
    <div className="nav relative">
...
    </div>
  );
};

...

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(NavContainer),
);

webpack.prod.js

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),
};

Answer 1

请注意，云中配置的路径目录将与您本地的路径目录不同

所以要解决此问题，您有两种方法：

• 在将所有内容部署到heroku之前构建为生产模式

• 找到一种解决云中路径的方法，以便Webpack可以在云中运行并构建代码

更新：删除导航文件夹以修复错误。