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

[yleclanche]

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

• OS: Linux
• Browser: Chrome
• Version: Last version

Additional context

Is remix-image still maintainaid ? Are there alternatives ?

[vitto-moz]

have the same issue :(

[vitto-moz]

@yleclanche , change the import to

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