我正在尝试创建一个通用的 React 应用程序（在服务器和客户端上都使用 webpack）并且在导入图像时遇到了困难。我想写这个：

import someImage from './someImage.png'

const SomeImage = () => <img src={someImage}/>

这是我的 webpack 配置文件：

var path              = require('path');
var webpack           = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:  [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './client',
    'babel-polyfill'
  ],
  output: {
    path:     path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },
      {
        test: /\.css/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
      },
      { …

我的React Web App面临一个问题。我正在使用服务器端渲染和Redux与React。

这是发生了什么：

1. 要求页面（假设/about）

2. 浏览器加载并呈现服务器端文档内容（因为我正在使用SSR）。

3. 白屏出现一秒钟或更短的时间，然后整个页面呈现/绘制。

4. 当我说完整的页面渲染和绘画时。我的意思是，不是在服务器端（作为SSR的一部分）生成完整的页面内容（文档）。客户端也会生成一些内容（文档的一部分）。

因此，最初我会看到服务器端生成的html，然后是白屏，然后是完整的网页。

任何人都可以帮助我缩小范围，或者有人遇到类似的问题并需要解决此问题的解决方案。让我知道是否需要分享更多信息。

我想做什么

使用来自我们的 graphql 服务器的数据呈现页面服务器端有错误。

语境

我们的 GraphQL 服务器与多个 API 对话并返回一个由 Apollo UI 处理的 graphQL 响应。

某些 GraphQL 错误不被视为严重错误，我们仍希望使用它来渲染页面。例如

data: {
   thing: {
       id: "1234"
       name: "Thing"
       nonCriticalData: null
   },
   error: {
       graphQLErrors: [
           path: ['thing', 'nonCriticalData']
       ]
   }
}

根据我们从 Apollo 得到的上述响应，我们仍然希望使用thing. 综观实行getDataFromTree 这里，任何错误都会抛出，没有数据的其余部分。

我们计划如何处理我们的错误

以下是我们计划如何处理代码的片段：

getDataFromTree(app)
    .then(() => {})
    .catch(error => {

        const content = ReactDOMServer.renderToString(app);
        const { data } = client.getInitialState();

        console.log("data", data); <-------------- We need data here
        console.log("error", error); <———————— errors …

React中的应用程序代码

<video
  ref={(input) => { this.video = input; }}
  onError={this.onError}
>
  <source src="https://xxx.mp4" type="video/mp4" />
</video>

问题

在进行服务器端渲染时，如果视频src的加载早于onError附加到视频DOM上，则即使发生任何错误也不会调用onError。

我的尝试

1. 标签将具有类似的问题，但是可以通过检查img元素的“ complete”属性来解决，例如此答案，但是视频没有基于MDN文档的相应属性。

2. HTMLVideoElement有一个'error'属性，但是当我使用它时，即使video标签的src不正确，其值也始终为null。

3. 我也尝试使用HTMLVideoElement的“ readyState”和“ networkState”，但是这两个方法无法帮助您识别video src的加载是否错误或尚未初始化。

你们中有人遇到过同样的情况并解决了吗？预先感谢您的帮助和想法！

Angular5 服务器端渲染（（未知 url）的 Http 失败响应：0 未知错误）。

我相信上述错误与 CORS 有关。但是没有 SSR 的 angular5 CORS 工作正常。

当我将 Api 更改为子域时，会特别发生这种情况

Laravel API：http://api.localhost:80

节点快递：http://localhost:3000

下面是我为 Laravel PHP api 添加的标题。

        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Allow-Headers: Origin, Content-Type,Accept, X-Auth-Token ,App-Auth,X-XSRF-TOKEN,Authorization');
        header('Access-Control-Max-Age: 86400');

使用 Node 与 Laravel PHP 通信时，出现以下错误

Uncaught (in promise): [object Object]
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\ng\app-root\node_modules\@angular\core\bundles\core.umd.js:4783:33)
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask …

我正在尝试使用 react-redux 和 express 为服务器实现应用程序的服务器端渲染，webpack 用于创建包。

我开始使用以下文档：

https://redux.js.org/docs/recipes/ServerRendering.html

我有以下设置来加载从 webpack 创建的 main.js：

<script type="application/javascript" src="/static/main.js"></script>

但是，在启动快速服务器时，这是我在控制台中看到的：

Refused to execute script from 'http://localhost:8080/static/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

这不会在任何浏览器中启动。知道会发生什么吗？

After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?

Im using the exact same code from the controlled 'react material ui grid' example:

https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material …

我有一个 VUEJS SSR 设置，但不知道如何解决这个问题。

我的路线是这样的：

{
  path: '/:blogSlug', component: BlogPost, name: 'blog-post'
}

然后在 asyncData 函数中我有这个代码：

asyncData({store, route, router}) {
            let slug = route.params.blogSlug

            if (!store.state.blog.posts[slug]) {
                return store.dispatch('FETCH_BLOG_POST', { slug: slug }).catch((error) => {
                    console.log("error - pushing to /404")
                    router.push('/404');
                })
            }

            return(Promise.resolve());
        }

如果我禁用我的 javascript，这现在有效，主要是因为在服务器上执行了 asyncData()，然后如果没有找到博客文章，我推送 ('/404') ，它显示一个漂亮的“未找到”页面，然后发回 html到浏览器。

然后，主要是因为浏览器中的 URL 没有改变，在 hydration 过程中一切都失败了，因为 VueJS 仍在尝试渲染 BlogPost 组件而不是 404。

我的问题是，我可以在我的窗口中设置更新的 url。初始状态？或者我可以以某种方式从浏览器更改 URL？

如果不清楚，我可以将您需要的所有内容添加到问题中。

我正在尝试使用 I18n Angular 工具运行带有 dotnet 核心的 Angular 项目模板。（https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio）

这是我在创业课上的内容

app.Map("/fr", fr =>
{
    fr.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        spa.UseSpaPrerendering(options =>
        {
            options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/fr/main.bundle.js";
            options.BootModuleBuilder = env.IsDevelopment()
                ? new AngularCliBuilder(npmScript: "build:ssr2:fr")
                : null;
            options.ExcludeUrls = new[] { "/sockjs-node" };
        });

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "serve:fr");
        }
    });
});


app.Map("/en", en =>
{
    en.UseSpa(spa =>
    {
        // To learn more about …

我已经安装并成功使用了Angular5 + SSR。还是很不错的。

所有组件都可以在SSR和Non-SSR上正常运行。还有一些服务可以调用外部HTTP get api来获取一些数据。当然，它在非SSR模式下也能很好地工作。

但是，问题在于，在SSR上，节点服务器确实支持点支持来获取和呈现数据。我只能在客户端获取和呈现后才能看到获取的数据。

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class BannerService {

    constructor(public http: HttpClient){
        console.log('SmsService Initialized...');
    }

    getBanners(){
        return this.http.get(BASE_API_URL + '/getData', httpOptions);
    }
}

home.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router } from "@angular/router";
import {Subscription} from "rxjs/Subscription";
import {BannerService} from "../../services/banner.service";

@Component({
    selector: 'app-home',
    styleUrls: ['home.container.css'], …