azat-co / react-quickly

Source code for React Quickly [Manning, 2017]: Painless Web Apps with React, JSX, Redux, and GraphQL 📕
http://reactquickly.co
MIT License
544 stars 422 forks source link

CH17 Trying to run "node" project throws Invariant Violation exception #24

Open cmchenry opened 6 years ago

cmchenry commented 6 years ago

Was trying to run this code to see the output using node index.js. I setup webpack to compile the email.jsx to email.js with the following webpack.config.js

module.exports = { entry: './email.jsx', output: { path: __dirname, filename: 'email.js', libraryTarget:'commonjs2' }, devtool: '#sourcemap', module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: ['babel-loader'] } ] }, stats: { colors: true, reasons: true } }

but got this exception: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at invariant (/Users/cmchenry/js/node/node_modules/fbjs/lib/invariant.js:42:15) at ReactDOMServerRenderer.render (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2522:7) at ReactDOMServerRenderer.read (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19) at Object.renderToString (/Users/cmchenry/js/node/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25) at Object.<anonymous> (/Users/cmchenry/js/node/index.js:5:36) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3)

Found that if you change the following line in index.js const Email = React.createFactory(require('./email.js')) to const Email = React.createFactory(require('./email.js').default)

Now the code will runs!

Thanks to MartaJ on StackOverflow