Окно не определено с Next JS при использовании Elasti c UI - PullRequest
Новая
       5

Окно не определено с Next JS при использовании Elasti c UI

0 голосов
/ 28 апреля 2020

Просто пытаюсь добавить кнопку из библиотеки Elasti c UI , но просто получить окно не определяется при добавлении в кнопку. Вызов API и все остальное работает нормально, пока я не добавлю компонент кнопки или не добавлю в импорт в строке 3 ниже.

Есть ли способ использовать библиотеку Elasti c UI при создании серверный вызов API?

Вот основной код: 

import React from "react";
import "isomorphic-unfetch";
import { EuiButton } from "@elastic/eui";

export default class HomePage extends React.Component {
  static async getInitialProps() {
    let res = await fetch("https://api.randomuser.me/");
    let randUser = await res.json();
    console.log(randUser);
    return { users: randUser };
  }

  render() {
    return (
      <div>
        <h2>User info:</h2>
        <ul>
          {this.props.users.results.map((user, i) => {
            return <li key={"user-" + i}>{user.gender}</li>;
          })}
        </ul>
        <EuiButton href="http://www.elastic.co">Link to elastic.co</EuiButton>
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 29 апреля 2020

Не знаю, может ли это быть правильным решением, но я бы изучил следующий динамический c импорт.

Мне удалось заставить предыдущий код работать со своей стороны, но не знаю если тогда кнопка рендеринга на 100% та, которую вы ожидаете. 

import React from "react";
import dynamic from 'next/dynamic'
import "isomorphic-unfetch";

export default class HomePage extends React.Component {
  static async getInitialProps() {
    let res = await fetch("https://api.randomuser.me/");
    let randUser = await res.json();
    console.log(randUser);
    return { users: randUser };
  }

  render() {
    // dynamic import of the button
    const EuiButton = dynamic(() => import('@elastic/eui/').then(module => module.EuiButton))

    return (
      <div>
        <h2>User info:</h2>
        <ul>
          {this.props.users.results.map((user, i) => {
            return <li key={"user-" + i}>{user.gender}</li>;
          })}
        </ul>
        {/*render it only if we're from client side*/}
        {process.browser ? <EuiButton href="http://www.elastic.co">Link to elastic.co</EuiButton> : null }
      </div>
    );
  }
}

Надеюсь, это даст вам представление о том, как решить вашу проблему.

...