CODEWITHSUNDEEP
reactjsslick.js
jeff
jeff

Reputation: 1197

React-Slick error when embedding on server side

I'm trying to embed slick component rendered server side. My code almost the same like the code example: 

import React from 'react';
import Slider from 'react-slick';

export default class Carousel extends React.Component {

    render() {
        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1
        };
        return (
            <Slider {...settings}>
                <div><h3>1</h3></div>
                <div><h3>2</h3></div>
                <div><h3>3</h3></div>
                <div><h3>4</h3></div>
                <div><h3>5</h3></div>
                <div><h3>6</h3></div>
            </Slider>
        );
    }
};

Here is the using component: 

import React from 'react';
import Footer from './Footer.jsx';

import { Header } from 'web-components';
import { Carousel } from 'web-components';

module.exports = class extends React.Component {
    render() {
        return (
            <div id="mxd-full-page-wrapper">
                <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.css" />
                <Header fixPage={ function () {} } unfixPage={ function () {} }/>
                <Carousel/>
                <Footer/>
            </div>
        );
    }
};

I get following error:

Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner)

My NPM list react shows [email protected] which should be OK (no different versions), we use webpack.optimize.DedupePlugin().

Upvotes: 0

Views: 2357

Answers (1)

jeff
jeff

Reputation: 1197

found out the solution: same problem like here https://stackoverflow.com/a/31170775/888280

added this lines to webpack.config.js: 

resolve: {
        alias: {
            react: __dirname + '/node_modules/react'
        },

Upvotes: 1

Related Questions