node.js - ComponentDidMount() not called from bundle.js -
from understand, server-side rendering doesn't complete react lifecycle, stops @ render() componentdidmount() not called. whole life cycle need bundle page using tool webpack , inclue bundled file in page somehow, <script>.
i'm trying , have gotten bundle.js inside webpage, still don't see console.log()'s have set in components' componentdidmount().
the server-side rendering coming correctly because page has static content, none of behavior want defined in components happening.
here webpack.config.js:
webpack.config.js
const path = require('path'); const config = { entry: ['babel-polyfill', './views/index.jsx'], output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js', publicpath: '/public' }, module: { rules: [ { test: /\.(jsx|js)$/, exclude: /node_modules/ , use: 'babel-loader' } ] } }; module.exports = config; ./views/index.jsx points main template file looks this:
index.jsx
import react 'react'; import layout './layout.jsx'; import cube './components/cube/cube.jsx'; class index extends react.component { render() { return ( <layout title={this.props.title}> <cube /> </layout> ); } } export default index; where layout.jsx i'm including <script src="/public/bundle.js">:
layout.jsx
import react 'react'; class layout extends react.component { render() { return ( <html> <head> <title>{this.props.title}</title> <script type="text/javascript" src="/public/bundle.js"></script> </head> <body> {this.props.children} </body> </html> ); } } export default layout; and finally, in cube.jsx have componentdidmount() console.log():
cube.jsx
import react 'react'; class cube extends react.component { componentdidmount() { console.log("suhhh"); } render() { return ( <div> <h1>hello</h1> </div> ); } } export default cube; can please me understand why in neither chrome console nor pm2 logs i'm seeing signs of componentdidmount() being executed?
here app if helps: https://github.com/markscode/personalwebsite
thanks!
Comments
Post a Comment