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语句时，构建将成功完成，即：

//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'

安装case-sensitive-paths-webpack-plugin对我有帮助

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

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

1 个答案: