使用React,Express和Weback调试服务器端渲染

问题描述 投票:1回答:0

我有一个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生成源映射,但是它们仅在浏览器中调试时才起作用。

reactjs debugging express webpack-2 serverside-rendering
© www.soinside.com 2019 - 2024. All rights reserved.