陣營靜態本站的WebPack

我試圖創建一個靜態的網站下面這個教程http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/陣營靜態本站的WebPack

目前我得到這個錯誤：錯誤的ReferenceError：文件沒有定義

這是我的應用程序。 JSX文件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router } from 'react-router'; 
import routes from './config/routes'; 



class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     } 
    } 
    render() { 
     return (
      <Router>{routes}</Router> 
     ); 
    } 
} 
export default App; 
module.exports = function render(locals, callback) { 
    var html = React.renderToStaticMarkup(React.createElement(App, locals)) 
    callback(null, '<!DOCTYPE html>' + html) 
}

路線：

import React from 'react'; 
import { Route, IndexRoute } from 'react-router'; 
import Layout from '../components/layout'; 
import Home from '../components/home'; 

export default (
    <Route path="/" component={Layout}> 
    <IndexRoute component={Home} /> 
    </Route> 
);

layout.j SX組件：

import React from 'react'; 
import Nav from './nav'; 
import Footer from './footer'; 

import Styles from '../styles.scss'; 

class Layout extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 

    } 
    } 
    render() { 
    return (
     <div id="layout" className={Styles.main}> 
     <Nav /> 
     {this.props.children} 
     <Footer /> 
     </div> 
    ) 
    } 

} 

Layout.PropTypes = { 
    children: React.PropTypes.object.isRequired 
} 



export default Layout;

和我webpack.config.js文件：

/* eslint-disable */ 
var path    = require('path'), 
    webpack   = require('webpack'), 
    autoprefixer  = require('autoprefixer'), 
    OpenBrowserPlugin = require('open-browser-webpack-plugin'); 
    StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin'); 
    data = require('./data'); 

var configServe = { 
    port: 9100, 
}; 


module.exports = { 
    devServer: { 
     hot: true, 
     inline: true, 
     historyApiFallback: true, 
     progress: true, 
     port: configServe.port, 
    }, 

    entry: [ 
     'webpack/hot/dev-server', 
     'webpack-dev-server/client?http://localhost:' + configServe.port, 
     path.resolve(__dirname, './src/app.jsx'), 
    ], 
    output: { 
     path: __dirname, 
     filename: './dist/bundle.js', 
     libraryTarget: 'umd' 
    }, 
    module: { 
     loaders: [ 
      { 
       // JSX files : 
       test: /\.js[x]?$/, 
       include: path.resolve(__dirname, 'src'), 
       exclude: /node_modules/, 
       loader: 'babel-loader?presets[]=es2015&presets[]=react', 
      }, 
      { 
       // CSS files : 
       test: /\.css?$/, 
       include: path.resolve(__dirname, 'src'), 
       loader: 'style-loader!css-loader!postcss-loader', 
      }, 
      { 
       // SCSS files : 
       test: /\.scss?$/, 
       include: path.resolve(__dirname, 'src'), 
       loader: 'style-loader!css-loader!postcss-loader!sass', 
      }, 
      { 
       test: /\.(png|jpg)$/, 
       include: path.resolve(__dirname, 'src'), 
       loader: 'file-loader' 
      }, 
      { 
       test: /\.svg$/, 
     loader: 'svg-inline' 
      } 
     ], 
    }, 
    postcss: [ 
     autoprefixer({ browsers: ['last 3 versions'] }), 
    ], 

    plugins: [ 
     // Avoid publishing files when compilation fails 
     new StaticSiteGeneratorPlugin('./dist/bundle.js', data.routes, data), 
     new webpack.NoErrorsPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new OpenBrowserPlugin({ url: 'http://localhost:' + configServe.port }), 
    ], 

    resolve: { 
     extensions: ['', '.js', '.jsx'], 
    }, 

    stats: { 
     // Nice colored output 
     colors: true, 
    }, 

    // Create Sourcemaps for the bundle 
    devtool: 'source-map', 
};

希望有人能幫助我想出解決辦法。我希望最終將這一切都以非官方的方式與React創建靜態網頁並在github上發佈。

來源

2016-04-29 Dileet

對我來說問題是一些模塊在調用'callback'（創建文檔）之前被導入，它需要文檔在那裏。 – rikAtee

我想這行導致錯誤：

var html = React.renderToStaticMarkup(React.createElement(Root, locals))

有您使用的是一些Root成分，但是從你的代碼，它的結論是沒有定義。它也是在教程中定義的（你已經指出）：var Root = require('./components/Root.jsx')

來源

2016-04-29 06:08:53 sehrob

我更新了app.jsx以從創建的App類創建元素。我上面更新了我的答案。但我仍然得到同樣的錯誤。 ERROR in ReferenceError：document is not defined – Dileet

我想在這裏'callback（null，'<！DOCTYPE html>'+ html）'變量'html'需要是合法的html標記，哪個函數創建'document'對象。不是''，而是''，我的意思是。並更好地使用本教程中給出的'Router'： 'Router.run（路由，locals.path，函數（Handler））{} {var html = React.renderToStaticMarkup（React.createElement（Handler，locals））回調（null，'<！DOCTYPE html>'+ html） }）' – sehrob

陣營靜態本站的WebPack

回答

相關問題