阵营静态本站的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

回答

相关问题