can not patch react code

[lonelyclick]

This is the case with me: I have a dist.js generated by the webpack, in order not to be affected by the impact of webpack, I create a new file main.js: (webpack entry is dist.src.js and output is dist.js

main.js

global.SSRCaching = require('electrode-react-ssr-caching')
require('./dist')

dist.src.js

import React from 'react' // for jsx
import {renderToString} from 'react-dom/server' // for react server render

// some logic

SSRCaching.clearProfileData()
SSRCaching.enableProfiling()
SSRCaching.enableCachingDebug()

renderToString(<MyApp />)

SSRCaching.enableProfiling(false);
console.log(JSON.stringify(SSRCaching.profileData, null, 2))

Start command is node main.js

It is frustrating that:

node_modules/electrode-react-ssr-caching/lib/ssr-caching.js

ReactCompositeComponent.construct = function (element) {
  console.log('execute constructor .......')
  if (config.enabled) {
    if (config.profiling) {
      this.__p = {time: undefined};
      this.__profileTime = this.__realProfileTime;
    }
    this._name = element.type && typeof element.type !== "string" && element.type.name;
    this.mountComponent = this._name ? this.mountComponentCache : this._mountComponent;
  }
  return this._construct(element);
};

execute constructor ....... never apper

[lonelyclick]

Excuse me, what is the progress now ？ @ananavati

[ananavati]

@lonelyclick We will let you know once we have more info.

Do you see any other errors and are you running node in production env?

[lonelyclick]

I was running in the development mode, there are webpack integration. However, after I read the source code, I believe that the development model and the deployment model is no different. I understand that the development model should also be able to patch the react. But always fail. So the essence of the problem is how we can be elegant to react patch.

[ananavati]

In order for the enableCaching() method to work, you'll also need NODE_ENV set to production, or else it will throw an error.

as mentioned in README/docs pre-requisite/by-design to reassigning props is running production env https://github.com/electrode-io/electrode-react-ssr-caching#caching

refer to this closed ticket: https://github.com/electrode-io/electrode-react-ssr-caching/issues/14

a good stackoverflow reference on why patching/updating props doesn't work in react http://stackoverflow.com/questions/24939623/can-i-update-a-components-props-in-react-js

[lonelyclick]

Thank you very much, but I still not work.

NODE_ENV=production node main.js

[TerenceGe]

@lonelyclick I encountered the same issue when using webpack, and I just fixed that by setting 'react-dom/server' as external in webpack config.

[lonelyclick]

cool, it's worked ! @TerenceGe

I think it should be added to the document, the webpack environment to explain @ananavati

[maxpain]

@TerenceGe Can you make an example please?

[Peleg]

fwiw i just ran into the same problem and had to specify react-dom/server as an external dep in webpack (like @TerenceGe suggested), but additionally had to use webpack's BannerPlugin to ensure electrode is required before.

example webpack config:

module.exports = {
  entry: '...',
  output: '...',
  externals: ['react-dom/server'],
  plugins: [
    new webpack.BannerPlugin({
      banner: 'global.SSRCaching = require("electrode-react-ssr-caching")',
      raw: true,
      entryOnly: true
    })
  ]
};