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

我有一个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)
});

const store=configureStore（）；
常量app=express（）；
app.use（compression（））；
use（express.static（path.join（uu dirname，'public'），{index:false}））；
应用程序获取（“*”，（请求，请求）=>{
匹配（{routes:routes（store），location:req.url}，（err，redirect，props）=>{
如果（错误）{
资源状态（500）.发送（错误消息）
}else if（重定向）{
res.redirect（redirect.pathname+redirect.search）
}否则如果（道具）{
const appHtml=renderToString(
);
res.send（模板）({
正文：appHtml
}))
}否则{
res.status（404.send）（“未找到”）
}
})
});
const PORT=process.env.PORT | | 8080；
应用程序侦听（端口、函数（）{
console.log（'在本地主机上运行的Production Express服务器：'+端口）
});

---

我已将webpack配置为为生成bundle.js的源地图，但它们仅在浏览器中调试时才起作用。

我建议在文本编辑器中打开

bundle.js

，并移动到

239027

字符。如果您熟悉代码库，那么在看到捆绑的代码后，您应该能够分辨出代码的哪一部分来自。如果你的代码是非混合的，这会有帮助。就调试而言，我假设你的

包是小型版本。我建议您使用未统一的
捆绑包
进行开发/调试。通过这种方式，stacktrace会指出正确的行号，打开bundle.js会显示未统一的代码，这些代码很容易阅读和解释。谢谢各位，我会尝试你们的建议。实际上，我还使用chrome开发工具管理调试节点服务器端渲染。@Panther您的建议非常有帮助，我禁用了缩小功能，只留下babel用于传输。当我走到那一行时，我看到了源代码中的一条注释，我可以很快找到它发生在哪个组件中。然后我在chrome节点调试中使用sourcemaps，找到了错误发生的原始位置！我建议您在文本编辑器中打开
bundle.js
，然后移动到
239027
字符。如果您熟悉代码库，那么在看到捆绑的代码后，您应该能够分辨出代码的哪一部分来自。如果你的代码是非混合的，这会有帮助。就调试而言，我假设你的
包是小型版本。我建议您使用未统一的
捆绑包
进行开发/调试。通过这种方式，stacktrace会指出正确的行号，打开bundle.js会显示未统一的代码，这些代码很容易阅读和解释。谢谢各位，我会尝试你们的建议。实际上，我还使用chrome开发工具管理调试节点服务器端渲染。@Panther您的建议非常有帮助，我禁用了缩小功能，只留下babel用于传输。当我走到那一行时，我看到了源代码中的一条注释，我可以很快找到它发生在哪个组件中。然后我在chrome节点调试中使用sourcemaps，找到了错误发生的原始位置！