2016-03-24 11 views
2

Nach dem Tutorial here, habe ich es geschafft, Webpack meine Bündelung für mich zu tun, und es funktioniert für Pre-Rendering auf der Serverseite, zB:React.NET, Webpack - 'ReactDOM' ist nicht definiert (Client-Seite)

@Html.React("Components.myComponent", 
      New With { 
       .initialData = Nothing 
      }) 

@Html.ReactInitJavaScript() 

Dies ist meine Komponente im Browser korrekt angezeigt wird, aber sobald der Kunde erhalte ich 'ReactDOM' is undefined den Fehler übernimmt

ich die react-dom installiert haben mit npm install react-dom --save-dev
ich die ReactDOM zu require versucht haben, , f rste in der .jsx Datei meine Komponente enthält, dann in den Client.js-Datei, die webpack von baut:

//myComponent.jsx 
var React = require('react'); 
var ReactDOM = require('react-dom'); 

oder

//client.js 
var ReactDOM = require('react-dom'); 
var Components = require('expose?Components!./src'); 

Aber ich bin immer noch die gleichen Fehler.

Wenn ich die react und react-dom Skripte direkt über meinem webpack kompilierten Client javascript, dann geht das Problem weg:

//index.html 
<script src="https://www.facebook.com/react-0.14.0.min.js"></script> 
<script src="https://www.facebook.com//react-dom-0.14.0.min.js"></script> 
<script src="~/Scripts/webpack/build/client.bundle.js"></script> 

So wie kann ich webpack richtig sind diese Skripte im Client-Bundle erhalten?

EDIT

Ich habe die folgende externals in meinem webpack.config.js haben, aber sie zu entfernen scheint keinen Unterschied zu machen.

externals: { 
    // Use external version of React (from CDN for client-side, or 
    // bundled with ReactJS.NET for server-side) 
    react: 'React' 
} 

Ich denke, Äußerlichkeiten sind, so dass Sie können Verwendung CDN basierte Skripte, so vielleicht ich dieses am Grübeln und sollte nur das CDN basierend verlassen Skripte meiner Ansicht nach reagieren?

Antwort

3

Sie sollten react-dom global in Ihrem client.js, zu, so wird es in Browser in ReactDOM Variable verfügbar seinen Client-Seite zu machen:

require("expose?ReactDOM!react-dom"); 
+0

Ja, das ist es! Ich habe mich darum gekümmert, aber das macht jetzt viel Sinn, danke :) –

Verwandte Themen