React Hot Loader isn't configured correctly

[darul75]

HMR] Update applied.
It appears that React Hot Loader isn't configured correctly. If you're using NPM, make sure your dependencies don't drag duplicate React distributions into their node_modules and that require("react") corresponds to the React instance you render your app with. If you're using a precompiled version of React, see https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react for integration instructions.

[m-ret]

I am having an issue with this

remote:        ERROR in multi vendors
remote:        Module not found: Error: Cannot resolve module 'react-hot-loader' in /tmp/build_bd7d08da71108726a745c1e7012caf26/app
remote:        @ multi vendors
remote:        
remote:        ERROR in Entry module not found: Error: Cannot resolve module 'react-hot' in /tmp/build_bd7d08da71108726a745c1e7012caf26/app

when I do git push staging master in order to upload to Heroku. So I get an error in Heroku and my app crashes

[darul75]

Hi @maketroli ,

react-hot-loader has to be used only in development mode.

In order to deploy to heroku, make sure to deploy this way:

1. run following command

npm run build

it will create a dist folder with everything inside.

2. test you app is working well on http://127.0.0.1:3000

3. commit all your files

Then Heroku will use this 'Procfile 'file https://github.com/darul75/web-react/blob/master/Procfile

You can also check here https://github.com/darul75/web-react/blob/master/package.json#L16

"start": "node dist/server.js",

I hope it will help

[m-ret]

I have this error when I enter to that url after running npm run start

TypeError: Cannot read property 'meta' of undefined
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/dist/server.js:298:46
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/match.js:58:5
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/useRoutes.js:120:15
   at done (/Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/AsyncUtils.js:49:19)
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/AsyncUtils.js:55:7
   at getComponentsForRoute (/Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/getComponents.js:9:5)
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/getComponents.js:28:5
   at /Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/AsyncUtils.js:54:5
   at Array.forEach (native)
   at Object.mapAsync (/Users/Marcelo/Documents/Projects/Greencube-Projects/fruitspot/node_modules/react-router/lib/AsyncUtils.js:53:9)

[darul75]

on heroku you deploy a production app, don't you ?

npm run build

bundles your app for production and in this case default port is 3000 but you can change it if you want https://github.com/darul75/web-react/blob/master/server/server.js#L15

app.set('port', process.env.PORT || 3000);

[m-ret]

I run npm run build, then commit my changes and then push staging master

when that push is on the terminal, I get the error I pasted in my first question. And in Heroku web app I get this

Application Error
An error occurred in the application and your page could not be served. Please try again in a few moments.
If you are the application owner, check your logs for details.

and in Heroku Logs there is an error like this

npm ERR! Tell the author that this fails on your system:
2016-01-12T16:49:14.018846+00:00 app[web.1]: (function webpackMissingModule() { throw new Error("Cannot find module "./server/server""); }(

[darul75]

I try to reproduce your case, give me time :) in the meantime can you take a look at the following.

Maybe react-helmet is not configured well https://github.com/darul75/web-react/blob/master/server/utils/renderer.js#L83

react-helmet is used for head metadatas instrumentation and I have choosen to write a configuration file named config.json

https://github.com/darul75/web-react/search?utf8=%E2%9C%93&q=config.json

maybe you are not requiring it anywhere and then it crashed the app...

have you tried first making it work in dev mode

npm run dev

See changes at http://127.0.0.1:8080

[m-ret]

I am reading those links. But in dev mode everything is fine. The issue comes when I upload the app to Heroku.

And actually the issue seems to be with Helmet, because if I do this

      let head = Helmet.rewind();
      console.log('head', head);

I get undefined

[m-ret]

Actually I know what happened now

I removed HtmlHeaderTags from the folder app/Documents

that component is

// LIBRARY
import React from 'react';
import Helmet from 'react-helmet';

// TODO: do it in store maybe
const metas = require('../../../assets/config.json').helmet;

const HtmlHeaderTags = () => (
  <div>
    <Helmet link={metas.link} meta={metas.meta} title={metas.title} />
  </div>
);

HtmlHeaderTags.prototype.displayName = 'HtmlHeaderTags';

export default HtmlHeaderTags;

then you have to included in /components/App/App.js

// LIBRARY
import React from 'react';

// COMPONENT
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
// import Recorder from '../Recorder/Recorder';
import HtmlHeaderTags from '../Document/HtmlHeaderTags'; // HERE

const { PropTypes } = React;

// css
if (process.env.BROWSER) {
  require('./_App.scss');
  require('./_App.sass');
  require('bootstrap/dist/css/bootstrap.css');
  require('file?name=favicon.ico!../../images/favicon.ico');
}

export default class App extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <HtmlHeaderTags /> //HERE
        <Header />
        <div className='main-content'>
          {this.props.children}
        </div>
        <Footer />
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.node
};

App.prototype.displayName = 'App';

So sorry, and thanks for your time

[m-ret]

I fixed that issue with Helmet, but Heroku not working yet due to the same issue with React hot loader.

[darul75]

hmm maybe I need to remove something I check tomorrow to remove react-hot loader in case of production distribution.

https://github.com/darul75/web-react/blob/master/conf/webpack-config.js#L126
and here
https://github.com/darul75/web-react/blob/master/conf/webpack-config.js#L172

to get (or similar)

{ test: /\.(jsx?)$/, loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,plugins[]=transform-decorators-legacy,plugins[]=transform-class-properties'], exclude: /node_modules/ }

become

{ test: /\.(jsx?)$/, loaders: ['babel?presets[]=react,presets[]=es2015,plugins[]=transform-decorators-legacy,plugins[]=transform-class-properties'], exclude: /node_modules/ }

based on 'prod' variable

https://github.com/darul75/web-react/blob/master/conf/webpack-config.js#L46

if (prod)....

I keep you in touch, weird as for me no problem to push on heroku

[darul75]

Hi, can you send me a link to your code, or content of your package.json for example, I can not reproduce issue

[m-ret]

Hey, do not worry, I just fix it, the issue is in the package.json, react-hot-loader was in DevDependencies instead of Dependencies.