MDS and React

%3CLINGO-SUB%20id%3D%22lingo-sub-25773%22%20slang%3D%22en-US%22%3EMDS%20and%20React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-25773%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20build%20a%20simple%20React%20component%20using%20UI%20Fabric.%20The%20%26nbsp%3Bcomponent%20is%20created%20in%20a%20static%20method%20from%20a%20class%20(TypeScript).%20Script%20is%20loaded%20from%20a%20Custom%20Action%20and%20made%20MDS%20compatible%20using%26nbsp%3B%3CSPAN%3ERegisterModuleInit.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EReact%20%26amp%3B%20ReactDOM%20libraries%20are%20loaded%20suing%20SP.SOD.registerSOD%20and%20execFunc.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EAll%20this%20works%20perfectly%20fine%20on%20first%20page%20load.%20I%20could%20se%20the%20component%20rendered%20on%20the%20provided%20HTML%20element%20and%20visible%20in%20React%20developer%20tool.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EBut%2C%20when%20the%20page%20is%20reloaded%20(after%20visiting%20another%20one%20the%20the%20same%20site)%2C%20the%20component%20does%20not%20work%20properly.%20It%20renders%20but%20no%20even%20(like%20a%20mouse%20click%20on%20a%20button)%20works.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3ELooking%20at%20React%20tool%2C%20the%20component%20is%20listed%20twice.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI've%20change%20my%20code%20as%20follow%2C%20trying%20to%20re-%22attach%22%20the%20already%20build%20component%20to%20the%20HTML%20element.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EReactDOM.render(this.component%2C%20theHTMLElement)%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EBut%20React%26nbsp%3Bgives%20me%20an%20strange%20error%3A%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%22Invariant%20Violation%3A%20ReactDOM.render()%3A%20Invalid%20component%20element.%20This%20may%20be%20caused%20by%20unintentionally%20loading%20two%20independent%20copies%20of%20React.%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20idea%20what%20I've%20implemented%20wrong%20%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-25885%22%20slang%3D%22en-US%22%3ERe%3A%20MDS%20and%20React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-25885%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20-%20something%20very%20similar%20and%20it%20works%20fine.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20managed%20to%20%22destroy%22%20the%20old%20component%20(the%20one%20create%20from%20previous%20page%20load)%20by%20keeping%20a%20reference%20to%20the%20HTML%20element%20and%20calling%26nbsp%3BReactDOM.unmountComponentAtNode%20and%20then%20calling%20ReactDOM.render%20to%20build%20a%20new%20one.%3C%2FP%3E%3CP%3EI%20now%20have%20only%20instance%20of%20my%20component%20displayed%20in%20React%20DevTool%20but%20I%20still%20have%20issue%20with%20the%20evens.%20They%20are%20not%20triggered.%3C%2FP%3E%3CP%3EDigging%20in%20react.js...%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-25842%22%20slang%3D%22en-US%22%3ERe%3A%20MDS%20and%20React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-25842%22%20slang%3D%22en-US%22%3E%3CP%3Ewere%20you%20doing%20something%20similar%20to%20below%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Eif%20(%22undefined%22%20!%3D%20typeof%20g_MinimalDownload%20%26amp%3B%26amp%3B%20g_MinimalDownload)%20%7B%0A%2F%2F%20Register%20script%20for%20MDS%20if%20possible%0Aconsole.log('MDS%20enabled.')%3B%0ARegisterModuleInit(%20_spPageContextInfo.webAbsoluteUrl%20%2B%20%22%2FStyle%20Library%2FMDS.js%22%2C%20RemoteManager_Inject)%3B%20%2F%2FMDS%20registration%0Aconsole.log('Register%20Module%20after%20Init')%3B%0ANonMDS()%3B%20%2F%2Fnon%20MDS%20run%0A%7D%20else%20%7B%0Aconsole.log('MDS%20not%20enabled.')%3B%0A%0ANonMDS()%3B%0A%7D%0Afunction%20NonMDS()%7B%0Aconsole.log('Non%20MDS%20run...')%3B%0A%7D%0Afunction%20RemoteManager_Inject()%20%7B%0Aconsole.log('Remote%20Manager%20Inject')%3B%0A%7D%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I've build a simple React component using UI Fabric. The  component is created in a static method from a class (TypeScript). Script is loaded from a Custom Action and made MDS compatible using RegisterModuleInit.

React & ReactDOM libraries are loaded suing SP.SOD.registerSOD and execFunc.

 

All this works perfectly fine on first page load. I could se the component rendered on the provided HTML element and visible in React developer tool.

 

But, when the page is reloaded (after visiting another one the the same site), the component does not work properly. It renders but no even (like a mouse click on a button) works.

Looking at React tool, the component is listed twice.

 

I've change my code as follow, trying to re-"attach" the already build component to the HTML element.

ReactDOM.render(this.component, theHTMLElement);

But React gives me an strange error: 

"Invariant Violation: ReactDOM.render(): Invalid component element. This may be caused by unintentionally loading two independent copies of React."

 

Any idea what I've implemented wrong ?

 

2 Replies

were you doing something similar to below:

 

if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload) {
// Register script for MDS if possible
console.log('MDS enabled.');
RegisterModuleInit( _spPageContextInfo.webAbsoluteUrl + "/Style Library/MDS.js", RemoteManager_Inject); //MDS registration
console.log('Register Module after Init');
NonMDS(); //non MDS run
} else {
console.log('MDS not enabled.');

NonMDS();
}
function NonMDS(){
console.log('Non MDS run...');
}
function RemoteManager_Inject() {
console.log('Remote Manager Inject');
}

 

Yes - something very similar and it works fine.

 

I've managed to "destroy" the old component (the one create from previous page load) by keeping a reference to the HTML element and calling ReactDOM.unmountComponentAtNode and then calling ReactDOM.render to build a new one.

I now have only instance of my component displayed in React DevTool but I still have issue with the evens. They are not triggered.

Digging in react.js...