Question

似乎无法逃避这一点。通常，我会说这是默认的import与已命名的常量导入错误，但似乎没有多少麻烦可以解决。

我正在做SSR /下一步/同构并使用：-

下一个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;

这是带有理想图像的错误吗？伴侣，我在做什么错了？

如何通过导入React Ideal Image（SSR）修复Webpack和Next JS

0 个答案: