search

Josh-McFarlin / remix-image

A React component for responsive images in Remix
https://remix-image.mcfarl.in
MIT License
329 stars 24 forks source link

Error: Element type is invalid: expected a string .... #83

Open yleclanche opened 4 months ago

yleclanche commented 4 months ago

Describe the bug

Hello, I followed the installation guide. My project is standard. When I try to insert an image in one of my component : 

<Image
    loaderUrl="/api/image"
    src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
    responsive={[
      {
        size: { width: 100, height: 100 },
        maxWidth: 500,
      },
      {
        size: { width: 600, height: 600 },
      },
    ]}
    dprVariants={[1, 3]}
  />

I get the following error : 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6120:9)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderHostElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6029:5)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderForwardRef (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5931:7)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6082:11)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderForwardRef (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5936:5)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6082:11)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderHostElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6029:5)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderNode (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6336:12)
    at renderChildrenArray (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6288:7)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6218:7)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6048:9)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderForwardRef (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5931:7)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6082:11)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderForwardRef (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:5936:5)
    at renderElement (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6082:11)
    at renderNodeDestructiveImpl (/home/django/test/frontend/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Just add an image component.

Expected behavior

Image should be displayed.

Screenshots or Videos

No response

Platform

Additional context

Is remix-image still maintainaid ? Are there alternatives ?

vitto-moz commented 3 months ago

have the same issue :(

vitto-moz commented 3 months ago

@yleclanche , change the import to 


import { Image, remixImageLoader } from 'remix-image';