search

gadicc / meteor-hmr

Hot Module Replacement for Meteor; in your app, with react, with build plugins
Other
142 stars 10 forks source link

interop issue/question #75

Closed genyded closed 8 years ago

genyded commented 8 years ago

Description of Problem

Non-default export in MainLayout then trying to require it using const MainLayout = require('./components/MainLayout').MainLayout; in routes file fails with the following error. Not an expert in AMD - Common JS, but thougt and non-default export should work with require? If I make MainLayout export default on the class and don't wrap it in the useDeps then it work fine, but I lose the Redux store. Not sure if this is a real issue or my stupidity, but any thoughts or help would be great...

Error ``` Invariant Violation: onlyChild must be passed a children with exactly one child. invariant http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:22188:15 Object.onlyChild [as only] http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:5828:84 Provider.render http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:49013:28 ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:16315:34 ReactCompositeComponentMixin._renderValidatedComponent http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:16335:32 wrapper [as _renderValidatedComponent] http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:9396:21 ReactCompositeComponentMixin.performInitialMount http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:15919:30 ReactCompositeComponentMixin.mountComponent http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:15850:21 wrapper [as mountComponent] http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:9396:21 Object.ReactReconciler.mountComponent http://localhost:3000/packages/modules.js?hash=673ca4c71b85b9a98e2cc20bc932febcae1ef37f:9475:35 ```
MainLayout.jsx ``` js import React, {Component} from 'react'; import { useDeps } from 'mantra-core'; import { Provider } from 'react-redux'; import { Grid, Row, Col, PageHeader } from 'react-bootstrap'; import NavHeader from './navigation/NavHeader.jsx' class MainLayoutImpl extends Component { render() { const {content, store} = this.props return (
Sandbox
 {content()}
); } } const depsToPropsMapper = (context, actions) => ({ store: context.Store }); export const MainLayout = useDeps(depsToPropsMapper)(MainLayoutImpl); // NON DEFAULT EXPORT ```
Applicable section of routes.jsx ``` js ... localFlowRouter = FlowRouter; const MainLayoutCtx = function(props) { const MainLayout = require('./components/MainLayout').MainLayout; // THOUGHT THIS SHOULD WORK - REQUIRE OF NON DEFAULT EXPORT?? const MainLayoutCtx = injectDeps(MainLayout); return ( ); }; ... ```

Environment

`.meteor/packages` ``` # Meteor packages used by this project, one per line. # Check this file (and the other files in this directory) into your repository. # # 'meteor add' and 'meteor remove' will edit this file for you, # but you can also edit it by hand. meteor-base # Packages every Meteor app needs to have mobile-experience # Packages for a great mobile UX mongo # The database Meteor supports right now blaze-html-templates # Compile .html files into Meteor Blaze views reactive-var # Reactive variable for tracker jquery # Helpful client-side library tracker # Meteor's client-side reactive programming library standard-minifier-css # CSS minifier run for production mode standard-minifier-js # JS minifier run for production mode es5-shim # ECMAScript 5 compatibility for older browsers. #ecmascript # Enable ECMAScript2015+ syntax in app code gadicc:ecmascript-hot #autopublish # Publish all data to the clients (for prototyping) #insecure # Allow all DB writes from clients (for prototyping) accounts-password kadira:flow-router-ssr reactive-dict audit-argument-checks check random ```
`.meteor/versions` ``` accounts-base@1.2.7 accounts-password@1.1.8 allow-deny@1.0.4 audit-argument-checks@1.0.7 autoupdate@1.2.9 babel-compiler@6.6.4 babel-runtime@0.1.8 base64@1.0.8 binary-heap@1.0.8 blaze@2.1.7 blaze-html-templates@1.0.4 blaze-tools@1.0.8 boilerplate-generator@1.0.8 caching-compiler@1.0.4 caching-html-compiler@1.0.6 callback-hook@1.0.8 check@1.2.1 chuangbo:cookie@1.1.0 ddp@1.2.5 ddp-client@1.2.7 ddp-common@1.2.5 ddp-rate-limiter@1.0.4 ddp-server@1.2.6 deps@1.0.12 diff-sequence@1.0.5 ecmascript@0.4.3 ecmascript-runtime@0.2.10 ejson@1.0.11 email@1.0.12 es5-shim@4.5.10 fastclick@1.0.11 gadicc:babel-compiler-babelrc@6.6.4_2 gadicc:ecmascript-hot@1.3.2-refactor.12 gadicc:hot@0.0.25 gadicc:hot-build@0.0.14 gadicc:modules-runtime-hot@0.6.3_6 geojson-utils@1.0.8 hot-code-push@1.0.4 html-tools@1.0.9 htmljs@1.0.9 http@1.1.5 id-map@1.0.7 jquery@1.11.8 kadira:flow-router-ssr@3.13.0 launch-screen@1.0.11 livedata@1.0.18 localstorage@1.0.9 logging@1.0.12 meteor@1.1.14 meteor-base@1.0.4 meteorhacks:fast-render@2.14.0 meteorhacks:inject-data@2.0.0 meteorhacks:inject-initial@1.0.4 meteorhacks:meteorx@1.4.1 meteorhacks:picker@1.0.3 minifier-css@1.1.11 minifier-js@1.1.11 minimongo@1.0.16 mobile-experience@1.0.4 mobile-status-bar@1.0.12 modules@0.6.1 modules-runtime@0.6.3 mongo@1.1.7 mongo-id@1.0.4 npm-bcrypt@0.8.5 npm-mongo@1.4.43 observe-sequence@1.0.11 ordered-dict@1.0.7 promise@0.6.7 random@1.0.9 rate-limit@1.0.4 reactive-dict@1.1.7 reactive-var@1.0.9 reload@1.1.8 retry@1.0.7 routepolicy@1.0.10 service-configuration@1.0.9 sha@1.0.7 spacebars@1.0.11 spacebars-compiler@1.0.11 srp@1.0.8 standard-minifier-css@1.0.6 standard-minifier-js@1.0.6 templating@1.1.9 templating-tools@1.0.4 tmeasday:check-npm-versions@0.3.1 tracker@1.0.13 ui@1.0.11 underscore@1.0.8 url@1.0.9 webapp@1.2.8 webapp-hashing@1.0.9 ```
`packages.json` ``` js { "name": "epapers-initial", "version": "0.1.0", "main": "index.js", "author": "ePapers LLC", "license": "ISC", "description": "initial EP2 roll out - feature incomplete", "private": true, "scripts": { "start": "meteor run", "testonly": "mocha client/**/tests/**/*.js --compilers js:babel-core/register", "test": "npm run testonly", "test-watch": "npm run testonly -- --watch --watch-extensions js,jsx" }, "devDependencies": { "babel-core": "^6.8.0", "babel-plugin-react-require": "^2.1.0", "babel-plugin-react-transform": "^2.0.2", "babel-polyfill": "^6.8.0", "babel-preset-es2015": "^6.6.0", "babel-preset-meteor": "^6.6.8", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "babel-root-slash-import": "^1.0.0", "chai": "^3.5.0", "enzyme": "^2.2.0", "eslint": "^2.9.0", "eslint-plugin-react": "^5.0.1", "mocha": "^2.4.5", "react-hot-loader": "^3.0.0-beta.1", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redbox-react": "^1.2.4", "sinon": "^1.17.4" }, "dependencies": { "classnames": "^2.2.5", "domready": "^1.0.8", "mantra-core": "^1.6.1", "meteor-node-stubs": "~0.2.0", "react": "^15.0.2", "react-addons-create-fragment": "^15.0.2", "react-bootstrap": "^0.29.3", "react-dom": "^15.0.2", "react-mounter": "^1.2.0", "react-paginate": "^1.0.5", "react-redux": "^4.4.5", "react-select": "^1.0.0-beta13", "redux": "^3.5.2", "redux-form": "^5.2.3", "redux-logger": "^2.6.1", "redux-thunk": "^2.0.1" } } ```
`.babelrc` ``` js { "presets": ["es2015", "stage-0", "react", "meteor"], "plugins": ["react-require", "react-hot-loader/babel"] } ```
gadicc commented 8 years ago

Hey, thanks for the detailed report. I'm actually more surprised this ever works. According to the error, <Provider> only accepts a single child, but you have two in there... <NavHeader /> and <Grid>. Let me know if restructuring your app to only include a single child there (you could possibly wrap both in a <div>, if appropriate) fixes the issue, otherwise I'll look into this further.

genyded commented 8 years ago

Figured it was me... when I was tying to get it working I changed some things up and missed a div wrapper. Adding it works like a champ and I am fast again with Redux. Thanks for a great stop gap repo and great support (even when it's not your issue) Gadi!

gadicc commented 8 years ago

Great stuff! With this release there's more generalized HMR support, so in theory, you might have even got hot loading of your redux reducers without realizing it :) (depend on setup).

Sure... I think HMR is an area Meteor has really missed out on, and would love to make it more prominent. It totally changed my workflow this year, and I hope all devs get that kind of benefit :)