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

问题描述

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

I am trying to deploy a React/Express app to Heroku.

package.json看起来如下:

package.json looks as follows:

"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上构建我的应用程序时，由于以下错误，构建失败:

When I attempt to build my app on heroku the build fails citing the following error:

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组件的导入语句时，构建将成功完成，即:

When I comment out my import statement of the Home component in App.js, the build WILL complete successfully ie:

//import Home from './Home';

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

However when I open this app nothing is rendered (because I believe I am having a separate issue with ReactRouter). Could anyone guide me to possible solutions for getting this component working? I don't understand why it works locally but cannot be imported on heroku. I think I may have changed the casing of the filename (home.js to Home.js) awhile back but I'm not sure if that is causing the effect somehow?

谢谢

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

Here is my webpack.config if relevant:

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

根据要求添加Home组件

EDIT 2: Home component as requested

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

推荐答案

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

I came across the same problem, when my code which runs locally fine pushed to heroku it fails with module not found error

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配置.

Don't forget to update your webpack config as it shown in docs.

这篇关于Heroku/Webpack/React-在Heroku上构建时找不到模块，但在本地找到?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！