Heroku / Webpack / React-在Heroku上构建时找不到模块，但在本地找到？

Question

我正在尝试将React / Express应用程序部署到Heroku。

package.json如下所示：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "start": "node server/server.js",
    "postinstall": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  },
  "dependencies": {
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2"
  }

当我尝试在heroku上构建我的应用程序时，由于以下错误，构建失败：

ERROR in ./client/components/App.js
           Module not found: Error: Can't resolve './Home' in '/tmp/build_341b9f12a6b1d7c2a28d1241f0b7c5b8/Swoodend-mCMS-f134118/client/components'
           @ ./client/components/App.js 19:12-29
           @ ./client/index.js
           npm ERR! code ELIFECYCLE
           npm ERR! errno 2
           npm ERR! scms@1.0.0 postinstall: `webpack -p`
           npm ERR! Exit status 2
           npm ERR!
           npm ERR! Failed at the scms@1.0.0 postinstall script.
           npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

当我注释掉App.js中Home组件的导入语句时，构建将成功完成，即：

//import Home from './Home';

但是，当我打开此应用程序时，什么也不会呈现（因为我相信我在ReactRouter中遇到了一个单独的问题）。 谁能指导我寻求使该组件正常工作的解决方案？ 我不明白为什么它在本地可用，但不能在heroku上导入。 我想我可能已经更改了文件名的大小写（从home.js更改为Home.js），但是我不确定这是否以某种方式引起了影响？

谢谢

编辑：

如果相关，这是我的webpack.config：

module.exports = {
 entry: './client/index.js',
 output: { path: __dirname + '/build', filename: 'bundle.js' },
 module: {
  rules: [
   {
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node-modules/,
      query: {
       presets: ['es2015', 'react']
      }
    },
    {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader', 'postcss-loader']
    }
  ]
 },
 devServer: {
   contentBase: path.join(__dirname, "/build"),
   //proxies all requests to express server. if route does not begin
   //with /api the server will send back index.html and let
   //react router handle the routing
   proxy: {
     '/**': {
       target: 'http://localhost:3001',
       secure: false
     }
   },
   compress: true,
   port: 3000,
   open: true
 },

 plugins: [
   new UglifyJSPlugin({
     test: /\.js$/,
     parallel: {
       cache: true,
       workers: 2
     },
     uglifyOptions: {
       ecma: 6
     }
   })
 ]
};

编辑2：根据要求的家庭组件

import React, { Component } from 'react';
import '../public/css/home.css';


export default class Home extends Component {

  componentDidMount(){
    fetch('/api/bar') //testing proxy
      .then((res) => {
        return res.json();
      }).then((res) => {
        console.log(res.message);
      })
  }

  render(){
    return (
      <div className="main-container">
        <img id="main-image" src="http://res.cloudinary.com/ddbeeuyr4/image/upload/dn_176,e_blur:805,o_71/v1506459774/office-2616310_1920_o1lmpb.jpg"/>
        <div className="info-box">
          <h1><span className="home-pink">m</span><span className="home-green">CMS</span></h1>
          <h3>a mini content management system</h3>
        </div>
      </div>
    );
  }
}

Answer 1

我遇到了同样的问题，当我在本地运行良好的代码推送到heroku时失败，并出现模块未找到错误

ERROR in ./src/client/app.js
Module not found: Error: Can't resolve './components/Root.jsx' in 
/app/src/client'

安装区分大小写的路径的webpack插件对我有帮助

不要忘了更新文档中显示的webpack配置。