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

【问题标题】：Heroku/Webpack/React - Module not found when building on Heroku but found locally?Heroku/Webpack/React - 在 Heroku 上构建时找不到模块但在本地找到？
【发布时间】：2018-03-09 13:38:01
【问题描述】：

我正在尝试将 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>
    );
  }
}

【问题讨论】：

您能向我们展示您的 Home 组件吗？
嗨@Andrew 我已经添加了 home 组件。我现在才意识到，如果没有该组件中的 fetch，我还没有尝试过部署......

标签： reactjs heroku webpack react-router

【解决方案1】：

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

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

case-sensitive-paths-webpack-plugin 的安装帮助了我

不要忘记更新您的 webpack 配置，如文档中所示。

【讨论】：