React Hot Loader isn't configured correctly
Opened this issue · 12 comments
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.
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
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:
- run following command
npm run build
it will create a dist folder with everything inside.
-
test you app is working well on http://127.0.0.1:3000
-
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
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)
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);
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""); }(
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
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
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
I fixed that issue with Helmet, but Heroku not working yet due to the same issue with React hot loader.
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
Hi, can you send me a link to your code, or content of your package.json for example, I can not reproduce issue
Hey, do not worry, I just fix it, the issue is in the package.json, react-hot-loader was in DevDependencies instead of Dependencies.