Unhandled Runtime Error

[timheerwagen]

What version of this package are you using? 2.5.2

What operating system, Node.js, and npm version? Windows 10, Node 18.16.1, npm 9.5.1 Using Next.Js 13.4.10 and pages dir

What happened? First of all thanks for the recent updates, really enjoying them. I have a custom Image Component, which is bundled inside a Ui-Library. Basically just next/image with a Wrapper.

import { d } from './chunk-RMTW775S.mjs';
import { b } from './chunk-AMKT3Q7W.mjs';
import { z } from './chunk-MT42QZJP.mjs';
import { a } from './chunk-D3UIQNGP.mjs';
import p from 'classnames';
import k from 'next/image';
import { useState } from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

var T=({src:t,alt:r,quality:u,className:f,containerClassName:d,dynamicRatio:o,containerProps:g,...b})=>{let[x,h]=useState(!1),[s,v]=useState(),[i,w]=useState();return jsx("div",{...g,className:p("relative w-full flex items-center justify-center object-cover overflow-hidden",!o&&"h-full",d),children:!x&&t?jsx(k,{className:p("object-cover object-center",f),src:t,...!s&&!i&&{fill:!0},sizes:"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",quality:u||"75",alt:r,width:s,height:i,onError:()=>h(!0),onLoadingComplete:({naturalWidth:N,naturalHeight:I,width:P,height:y})=>{o&&(v(o==="natural"?N:P),w(o==="natural"?I:y));},...b}):jsx(j,{src:String(t),alt:r})})},q=a(T),j=({src:t,alt:r})=>jsx("div",{"aria-describedby":t,"aria-label":r,className:"w-full h-full flex items-center justify-center bg-accent-100 dark:bg-accent-800",children:jsxs("div",{className:"p-2 truncate",children:[jsx(d,{size:"sm",className:"mx-auto",icon:z}),jsx(b,{size:"xs",className:"mx-auto",children:"Bild konnte nicht geladen werden."})]})});

export { T as a, q as b };

In a application which does not use next-translate-plugin inside next.config.js everything works fine. But as soon as i add Next Translate i get a weird Error:

Unhandled Runtime 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 `T`.

Call Stack
createFiberFromTypeAndProps
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (28439:0)
createFiberFromElement
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (28465:0)
reconcileSingleElement
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (15750:0)
reconcileChildFibers
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (15808:0)
reconcileChildren
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (19167:0)
updateHostComponent
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (19924:0)
beginWork
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performSyncWorkOnRoot
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26085:0)
flushSyncCallbacks
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (12042:0)
eval
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (25651:0)

What did you expect to happen? To render the image component.

Are you willing to submit a pull request to fix this bug? Sadly i dont have experience in writing plugins for Next.Js

[timheerwagen]

Apparently this is not a problem with next-translate-plugin, I was misled by the error message. Thanks for the great package!