Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Hot Loader isn't configured correctly #17

Open
darul75 opened this issue Aug 11, 2015 · 12 comments
Open

React Hot Loader isn't configured correctly #17

darul75 opened this issue Aug 11, 2015 · 12 comments

Comments

@darul75
Copy link
Owner

darul75 commented Aug 11, 2015

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
Copy link

m-ret commented Jan 12, 2016

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
Copy link
Owner Author

darul75 commented Jan 12, 2016

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.

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

  2. 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
Copy link

m-ret commented Jan 12, 2016

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
Copy link
Owner Author

darul75 commented Jan 12, 2016

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
Copy link

m-ret commented Jan 12, 2016

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
Copy link
Owner Author

darul75 commented Jan 12, 2016

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
Copy link

m-ret commented Jan 12, 2016

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
Copy link

m-ret commented Jan 12, 2016

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
Copy link

m-ret commented Jan 12, 2016

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

@darul75
Copy link
Owner Author

darul75 commented Jan 12, 2016

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
Copy link
Owner Author

darul75 commented Jan 13, 2016

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
Copy link

m-ret commented Jan 13, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants