使用React,Express和Weback调试服务器端呈现

时间:2017-05-17 10:41:00

标签: reactjs debugging express webpack-2 serverside-rendering

我有一个React应用程序,而服务器端渲染我得到错误,我无法破译:

TypeError: Cannot read property 'data' of undefined
    at t.default (/code/server.bundle.js:1:239027)
    at /code/node_modules/react-dom/lib/ReactCompositeComponent.js:306:16
    at measureLifeCyclePerf (/code/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (/code/node_modules/react-dom/lib/ReactCompositeComponent.js:305:14)
    at ReactCompositeComponentWrapper._constructComponent (/code/node_modules/react-dom/lib/ReactCompositeComponent.js:280:21)
    at ReactCompositeComponentWrapper.mountComponent (/code/node_modules/react-dom/lib/ReactCompositeComponent.js:188:21)
    at Object.mountComponent (/code/node_modules/react-dom/lib/ReactReconciler.js:46:35)
    at ReactDOMComponent.mountChildren (/code/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
    at ReactDOMComponent._createContentMarkup (/code/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
    at ReactDOMComponent.mountComponent (/code/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)

如果我从源地图或其他东西得到一些堆栈错误,我会很高兴。

我怎样才能做到这一点?

这是我用于服务器端呈现的代码:

const store = configureStore();
const app = express();
app.use(compression());

app.use(express.static(path.join(__dirname, 'public'), {index: false}));

app.get('*', (req, res) => {
    match({routes: routes(store), location: req.url}, (err, redirect, props) => {
        if (err) {
            res.status(500).send(err.message)
        } else if (redirect) {
            res.redirect(redirect.pathname + redirect.search)
        } else if (props) {
            const appHtml = renderToString(
                <Provider store={store}>
                    <RouterContext store={store} {...props} />
                </Provider>
            );
            res.send(template({
                body: appHtml
            }))
        } else {
            res.status(404).send('Not Found')
        }
    })
});

const PORT = process.env.PORT || 8080;
app.listen(PORT, function () {
    console.log('Production Express server running at localhost:' + PORT)
});

我已将webpack配置为为我的bundle.js生成源映射,但它们仅在浏览器中调试时才有效。

0 个答案:

没有答案