Webpack Reagieren Äußerlichkeiten funktioniert nicht

scheine ich kann nicht webpack der Externen Konfiguration zu erhalten für richtig ReagierenWebpack Reagieren Äußerlichkeiten funktioniert nicht

Die App funktioniert, wenn react als Anbieter gebündelt aus node_modules importiert wird. Aber wenn ich das Vendor-Paket entferne und versuche, von einem CDN zu reagieren, erhalte ich den folgenden Fehler.

Warnung: React.createElement: Typ ist ungültig - erwartete ein String (für eingebaute Komponenten) oder eine Klasse/Funktion (für Verbund Komponenten), aber bekam: undefined. Sie haben vergessen, wahrscheinlich Ihre Komponente aus der Datei zu exportieren, es in definiert ist printWarning @ react.js. 3640 Warnung @ react.js: 3664 create @ react.js: 2357 module.exports @ app.js: 122 webpack_require @ app.js: 20 (anonym) @ app.js: 429 webpack_require @ app.js: 20 module.exports @ app.js: 66 (anonym) @ app.js: 69

Vollständiger Code unter https://github.com/ericnoguchi/react-testing

Hier ist meine Webpack-Konfiguration

let LiveReloadPlugin = require('webpack-livereload-plugin'); 
let ExtractTextPlugin = require("extract-text-webpack-plugin"); 
let webpack = require('webpack'); 

module.exports = { 
    entry: { 
     'app': './@Client.js', 
     // 'vendor': [ 
     //  "react", 
     //  "react-dom", 
     //  "react-router" 
     // ], 
    }, 
    output: { 
     path: __dirname + '/_dist', 
     publicPath: '/', 
     filename: "[name].js" 
    }, 
    externals: { 
     "react": 'React', 
     "react-dom": 'ReactDOM', 
     "react-router": 'ReactRouter' 
    }, 
    devServer: { 
     contentBase: '_dist' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }) 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: [ 
         "react", 
         "es2015", 
         "stage-2" 
        ] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      "process.env": { 
       BROWSER: JSON.stringify(true) 
      } 
     }), 
     // new webpack.optimize.CommonsChunkPlugin({ 
     //  name: 'vendor', 
     //  filename: 'vendor.js', 
     //  minChunks: Infinity 
     // }), 
     new ExtractTextPlugin("css/[name].css"), 
     new LiveReloadPlugin() 
    ] 
};

und es gibt die Layout-Komponente

import React, { Component } from 'react'; 
import { Link } from 'react-router' 

// http://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components 
if (process.env.BROWSER) { 
    require('./layout.scss'); 
    console.log('lalala') 
} 

export class Layout extends Component { 
    handleClick() { 
    alert(0); 
    } 
    render() { 
    let {custom, children} = this.props; 
    return (
     <html> 
     <head> 
      <title>{custom.title}</title> 
      <link rel="stylesheet" type="text/css" href="css/app.css" /> 
     </head> 
     <body> 
      <h1>{custom.title}</h1> 
      <button onClick={this.handleClick}>Click me</button> 
      {children} 
      <ul> 
      <li> 
       <Link to="/">Index</Link> 
      </li> 
      <li> 
       <Link to="/about">About</Link> 
      </li> 
      <li> 
       <Link to="/foo">404</Link> 
      </li> 
      </ul> 


      <script dangerouslySetInnerHTML={{ 
      __html: 'window.PROPS=' + JSON.stringify(custom) 
      }}></script> 
      {/*<script src="vendor.js"></script>*/} 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js" /> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js" /> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.2/react-router.js" /> 
      <script src="app.js" /> 
     </body> 
     </html> 
    ); 
    } 
}

Kunde APP

import ReactDOM from 'react-dom'; 
import routes from './routes/routes.jsx' 

ReactDOM.render(routes, document);

Quelle

2017-02-05 ericsicons

Nicht verwandt mit Ihrer Frage, aber wie Sie es gefragt haben; das ist relevant [für dich] (http://importblogkit.com/2015/07/does-not-work/). –

Wo ist Ihr 'ReactDOM.render' Anruf? (Behalte alle relevanten Codes in der Frage). Können Sie Quellkarten aktivieren, so können Sie besser sehen, wo der tatsächliche Fehler ist (und zeigen Sie uns? App.js: Zeile hilft nicht, da es ein Build-Artefakt ist) –

@Dan Pantry Ich habe Webpacks Dev Tool Quellkarten aktiviert, aber es tut nicht scheint keine Hilfe zu sein siehe Bild – ericsicons

Reagieren wird durch den Fehler einfach gut Beurteilungs arbeiten Sie einfügen. Dein Problem ist woanders.

Es gibt jedoch mehrere Fehler in Ihrem Code. Vor allem ist es nicht sehr üblich, die ganze Seite von React zu generieren, und ich sehe Ihre html, head und body Tags innerhalb Ihrer render Methode.

Zweitens, wenn Sie die React CDN-Skripte laden von Reagieren, wie soll das funktionieren? :) Es ist ein Wunder, dass du diesen Fehler überhaupt bekommst.

Haben Sie eine index.html mit dem grundlegenden HTML-Skelett. Wenn Sie das serverseitige Rendern durchführen, lassen Sie eine einfache Vorlage dasselbe tun und betten Sie das serverseitige Rendern des React in einen Platzhalter ein.

Quelle

2017-02-05 09:17:03 CharlieBrown

Ja, ich verwende serverseitiges Rendering, damit die Reaction-Skripts geladen werden, da der Server die gesamte gerenderte Seite zurückgibt. Was ich nicht verstehe, ist, warum es nicht mit CDN funktioniert, aber funktioniert, wenn ich reaction von einem Webpack-Anbieter-Chunk verwende, der ein Skript sein wird, das über app.js geht. Es ist also im Grunde das gleiche Setup. – ericsicons

Vermutlich fehlt Ihnen in einer Ihrer Komponenten, die in Ihren 'routes' verwendet werden, ein' export default'. – CharlieBrown

Webpack Reagieren Äußerlichkeiten funktioniert nicht

Antwort

Verwandte Themen