search

remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
28.01k stars 2.36k forks source link

after updating to v2, react-slick is not working #7598

Closed pullmann4rent closed 6 months ago

pullmann4rent commented 7 months ago

What version of Remix are you using?

2.0.1

Are all your remix dependencies & dev-dependencies using the same version?

Steps to Reproduce

I created a new remix app with version 2 and want to use slick but its not working.

Expected Behavior

I got this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of ModalSlider. at createFiberFromTypeAndProps (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:20439:25) at createFiberFromElement (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:20460:23) at createChild (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:11377:34) at reconcileChildrenArray (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:11570:33) at reconcileChildFibers2 (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:11847:24) at reconcileChildren (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:14292:37) at updateHostComponent (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:14802:11) at beginWork (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:15923:22) at beginWork$1 (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:19749:22) at performUnitOfWork (http://localhost:3000/build/_shared/chunk-GIAAE3CH.js:19194:20)

Actual Behavior

import Slider from 'react-slick';    
      <Slider>

                <section>
                  <img src="https://cdnxx.data.com/xxx/xxxx" alt="image" className="slider-img" />
                </section>

          </Slider>

BTW: https://github.com/kevinfarrugia/react-glider this libary also not work with remix new update I get same error...

brophdawg11 commented 7 months ago

Potentially a duplicate of https://github.com/remix-run/remix/issues/7593

jjebennett commented 6 months ago

@pullmann4rent - Did you ever get this working?.. I have the exact same issue.

pullmann4rent commented 6 months ago

@pullmann4rent - Did you ever get this working?.. I have the exact same issue.

Yes like this:


import * as Slider from "react-slick";

const Slider2 = Slider.default.default;

<Slider2>

</Slider2>
jjebennett commented 6 months ago

@pullmann4rent - Thank you so much for you response - you legend. I'm not sure any amount of googling was going to get me the answer. All the best. J

brophdawg11 commented 6 months ago

Sounds like this has been resolved by OP.

fzn0x commented 2 weeks ago

This is still not solved. @brophdawg11 

"@remix-run/react": "^2.9.1",
"react-slick": "^0.30.2",
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6058:9)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
    at renderHostElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5967:5)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
    at renderChildrenArray (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6226:7)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6156:7)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5986:9)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderIndeterminateComponent (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5790:7)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderForwardRef (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5874:5)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6020:11)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderForwardRef (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5874:5)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6020:11)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
    at renderHostElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5967:5)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
    at renderChildrenArray (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6226:7)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6156:7)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5986:9)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderIndeterminateComponent (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5790:7)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderForwardRef (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5874:5)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6020:11)
    at renderNodeDestructiveImpl (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6274:12)
    at renderHostElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5646:3)
    at renderElement (D:\Projects\smart-number-website-frontend\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5967:5)
fzn0x commented 2 weeks ago

Working Solution:

You need to import the Module on the Client.

const [Slider, setSlider] = useState(null);

useEffect(() => {
  import("react-slick").then((Module) => {
    setSlider(() => Module.default);
  });
}, []);

var sliderSettings = {
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
};

{Slider ? (
<Slider {...sliderSettings}>
  <Image
    height="250px"
    width="500px"
    objectFit={"cover"}
    backgroundPosition={"center center"}
    src="/cover.png"
  />
  <Image
    height="250px"
    width="500px"
    objectFit={"cover"}
    backgroundPosition={"center center"}
    src="/cover.png"
  />
</Slider>
) : (
<></>
)}

This way, you can get things working. Make sure react-slick is installed.