个人中心
gpt4 book ai didi

javascript - react 引用错误: document is not defined

转载 作者：行者123 更新时间：2023-11-28 06:02:55 24 4
gpt4 key购买 nike

我正在尝试在服务器端渲染以下组件作为通用/同构应用程序的一部分:

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { GridLoader } from 'halogen';
import PostListItem from '../../components/PostListItem/PostListItem';
import { primary as color } from '../../colors';
import { changeSelectedPost, deletePostRequest } from '../../redux/modules/post';

export default connect()(class PostListView extends Component {
  static propTypes = {
    posts: ImmutablePropTypes.listOf(ImmutablePropTypes.contains({
      name: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
      content: PropTypes.string.isRequired,
      slug: PropTypes.string.isRequired,
      id: PropTypes.string.isRequired,
    })).isRequired,
    loading: PropTypes.boolean.isRequired,
    dispatch: PropTypes.func.isRequired,
  }

  handleClick(post) {
    this.props.dispatch(changeSelectedPost(post));
  }

  handleDelete(post) {
    if (confirm('Do you want to delete this post')) { // eslint-disable-line
      this.props.dispatch(deletePostRequest(post));
    }
  }

  render() {
    if (typeof window !== 'undefined' && this.props.loading) {
      return (
        <div className="container">
          <GridLoader color={color} />
        </div>
      );
    }
    return (
      <div className="listView">
        {
          this.props.posts.toSeq().map((post, i, arr) => (
            <PostListItem
              post={post}
              key={i}
              onClick={this.handleClick.bind(this, post)}
              onDelete={this.handleDelete.bind(this, post)}
            />
          ))
        }
      </div>
    );
  }
});

但我收到错误:

module.exports = document.createElement('div').style;
             ^

ReferenceError: document is not defined

添加 if block 似乎使应用程序崩溃(应用程序之前呈现完美，无论是服务器端还是客户端)。我很可能错过了一些非常明显的东西，了解我的记录:P。有什么建议么？ :)

更新:处理服务器端渲染和服务器端应用程序其余部分的文件:

// server/server.js
'use-strict';

import path from 'path';
import bodyParser from 'body-parser';
import Express from 'express';
import React from 'react';
import webpack from 'webpack';
import { fromJS } from 'immutable';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import { match, RouterContext } from 'react-router';
import { Model } from 'objection';
import { Provider } from 'react-redux';
import { renderToString } from 'react-dom/server';
import config from '../webpack.config.dev';
import routes from '../shared/routes';
import configureStore from '../shared/redux/configureStore';
import assets from './assets';
import db from './db';
import posts from './routes/post.routes';
import Post from './models/post';
import serverConfig from './serverConfig';

// Initialize the Express App
const app = new Express();

Model.knex(db);

if (process.env.NODE_ENV !== 'production') {
  const compiler = webpack(config);
  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
  app.use(webpackHotMiddleware(compiler));
}

// Apply body Parser and server public assets and routes
app.use(bodyParser.json({ limit: '20mb' }));
app.use(bodyParser.urlencoded({ limit: '20mb', extended: false }));

if (process.env.NODE_ENV !== 'production') {
  app.use(Express.static(path.resolve(__dirname, '../static')));
}

function getFilename() {
  if (process.env.NODE_ENV !== 'production') {
    return '"/dist/bundle.js"';
  }
  return `"/dist/${assets}"`;
}
app.use('/api', posts);

// Render Initial HTML
const renderFullPage = (html, initState, jsFile) => {
  return `
    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/styles/normalize.css">
        <link rel="stylesheet" href="/styles/skeleton.css">
        <title>CeresShop</title>
      </head>
        <div id="root">${html}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initState)};
        </script>
        <script src=${jsFile}></script>
      </body>
    </html>
  `;
};

// Server Side Rendering based on routes matched by React-router.
app.use((req, res) => {
  match({ routes, location: req.url }, (err, redirectLocation, renderProps) => {
    if (err) {
      return res.status(500).end('Internal server error');
    }

    if (!renderProps) {
      return res.status(404).end('Not found!');
    }
    const initialState = fromJS({
      postReducer: {
        posts: [],
        post: {},
        loading: false,
      },
      route: {
        locationBeforeTransitions: null,
      },
    });

    async function loadData() {
      if (req.url.includes('post')) {
        try {
          const newSlug = req.url.substring(5).split('-');
          const newId = newSlug[newSlug.length - 1];
          const newPost = await Post.query().where('id', newId);
          const toBeProcessed = JSON.stringify(newPost[0]);
          return initialState.setIn(['postReducer', 'post'], fromJS(JSON.parse(toBeProcessed)));
        } catch (error) {
          console.log(error);
          return initialState;
        }
      }
      try {
        const newPosts = await Post.query();
        newPosts.sort((a, b) => b.dateadded - a.dateadded);
        const toBeProcessed = JSON.stringify(newPosts);
        return initialState.setIn(['postReducer', 'posts'], fromJS(JSON.parse(toBeProcessed)));
      } catch (error) {
        console.log(error);
        return initialState;
      }
    }

    loadData().then((currentState) => {
      const store = configureStore(currentState);
      const createElement = (Component, props) => (
        <Component
          {...props}
          radiumConfig={{ userAgent: req.headers['user-agent'] }}
        />
      );
      const initialView = renderToString(
        <Provider store={store}>
          <RouterContext {...renderProps} createElement={createElement} />
        </Provider>
      );
      const finalState = store.getState().toJS();

      res.status(200).end(renderFullPage(initialView, finalState, getFilename()));
    }).catch(err1 => {
      console.log(err1);
      res.end(renderFullPage(`Error: ${err1}`, {}, getFilename()));
    });
  });
});

// start app
app.listen(serverConfig.port, (error) => {
  if (!error) {
    console.log(`DAT SERVER is running on port: ${serverConfig.port}!`); // eslint-disable-line
  }
});

export default app;

最佳答案

如果您有一个在服务器端呈现的组件需要另一个仅在客户端中呈现的组件，它仍然会尝试在服务器上导出该模块。您可以检查 document 是否存在，或者要求内联模块。

module.exports = typeof document !== 'undefined' ? document.createElement('div').style : null

// or

componentDidMount() {
  // this is only called in the client
  require('./clientComponent')
}

关于javascript - react 引用错误: document is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37130157/

24 4 0
文章推荐： javascript - Angular $response GET 请求删除内容类型
文章推荐： c++ - 将文本文件转换为二进制文件，然后再转换回文本
文章推荐： C++ 元编程 - 创建一个包含模板化方法的所有变体的元组
文章推荐： javascript - Angular ui-router 中的绝对名称
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com