Как исправить Webpack & Next JS с помощью импорта идеального изображения React (SSR) - PullRequest
Новая
       8

Как исправить Webpack & Next JS с помощью импорта идеального изображения React (SSR)

0 голосов
/ 21 февраля 2019

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

Я делаю SSR / Next / Isomorphic и использую: -

Далее JS 8.0.1 React & ReactDOM 16.8.2

В документах / SSR-примечаниях указывается, что это должно быть прямолинейно.Но это оказывается очень сложно.Действительно нужен хороший пример использования React Ideal Image в SSR.

Мой код:

У меня есть PageContainer, и в нем есть рекламный блок, который я хотел бы использовать react-ideal-image для.

PageContainer: 

import React, { Component } from 'react';
import { NavBar, AdvertBox } from '../index'; // <-- nav works, advertbox doesnt.
import { Provider } from 'react-redux';

import store from '../../redux/store';

const page = (Page) => {
    return (
        class PageWrapper extends Component {
            render() {
                return (
                    <Provider store={store}>
                        <div className="App">

                            <NavBar /> // <--NavBar renders perfectly
                            <AdvertBox // <--AdvertBox which contains ideal-image errors
                                src="https://via.placeholder.com/300"
                                onClick={() => alert('i go to advertisers' homepage')}
                                />
                        </div>

                        <style jsx>{`
                        .App {
                            text-align: center;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            align-content: center;
                            flex-direction: column;
                            width: 100%;
                            border: 1px solid green;
                          }
                        `}</style>

                    </Provider>
                )
            }
        }
    )
}
export default page;

Итак, в AdvertBox: 

import React from 'react';
import PropTypes from 'prop-types';
import IdealImage from 'react-ideal-image'; // this import actually causes no issues by itself
// but using the component in <AdvertBox /> erupts in `element type invalid` errors.

let myProps = {
    srcSet: [{ src: '/static/placeholder.png', width: 3500 }],
    alt: 'foo',
    width: 3500,
    height: 2095,
}
const AdvertBox = props => (

    <div id="advert-box-container" onClick={props.onClick}>
        <IdealImage {...myProps} />
    </div>
);

AdvertBox.propTypes = {
    src: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
}

export default AdvertBox;

Это ошибка с идеальным изображением?Что я делаю не так, приятель? ?

...