Failed to fetch in Nextjs

[ivajo26]

I was working with version 0.0.22 but when updating to version 3.0.0 I get this error. I am using NextJs.

 8;for(var l=0;l<g;l++){var h=D[n+l],p=sc[b];0===h||10===h?((1===b?ua:xa)(Ca(p,0)),p.length=0):p.push(h)}e+=g}I[d>>2]=e;return 0},A:function(){}};
  121 | (function(){function b(e){k.asm=e.exports;za=k.asm.N;Ra();Sa=k.asm.T;Ua.unshift(k.asm.O);Xa--;k.monitorRunDependencies&&k.monitorRunDependencies(Xa);0==Xa&&(null!==Ya&&(clearInterval(Ya),Ya=null),Za&&(e=Za,Za=null,e()))}function a(e){b(e.instance)}function c(e){return cb().then(function(f){return WebAssembly.instantiate(f,d)}).then(function(f){return f}).then(e,function(f){xa("failed to asynchronously prepare wasm: "+f);ta(f)})}var d={a:wc};Xa++;k.monitorRunDependencies&&k.monitorRunDependencies(Xa);
> 122 | if(k.instantiateWasm)try{return k.instantiateWasm(d,b)}catch(e){return xa("Module.instantiateWasm callback failed with error: "+e),!1}(function(){return ya||"function"!==typeof WebAssembly.instantiateStreaming||$a()||L.startsWith("file://")||"function"!==typeof fetch?c(a):fetch(L,{credentials:"same-origin"}).then(function(e){return WebAssembly.instantiateStreaming(e,d).then(a,function(f){xa("wasm streaming compile failed: "+f);xa("falling back to ArrayBuffer instantiation");return c(a)})})})().catch(ba);
      |                                                                                                                                                  ^
  123 | return{}})();k.___wasm_call_ctors=function(){return(k.___wasm_call_ctors=k.asm.O).apply(null,arguments)};var tb=k._free=function(){return(tb=k._free=k.asm.P).apply(null,arguments)},vc=k._malloc=function(){return(vc=k._malloc=k.asm.Q).apply(null,arguments)},sb=k.___getTypeName=function(){return(sb=k.___getTypeName=k.asm.R).apply(null,arguments)};k.___embind_register_native_and_builtin_types=function(){return(k.___embind_register_native_and_builtin_types=k.asm.S).apply(null,arguments)};
  124 | k.dynCall_jiji=function(){return(k.dynCall_jiji=k.asm.U).apply(null,arguments)};var xc;Za=function yc(){xc||zc();xc||(Za=yc)};
  125 | function zc(){function b(){if(!xc&&(xc=!0,k.calledRun=!0,!Aa)){db(Ua);aa(k);if(k.onRuntimeInitialized)k.onRuntimeInitialized();if(k.postRun)for("function"==typeof k.postRun&&(k.postRun=[k.postRun]);k.postRun.length;){var a=k.postRun.shift();Va.unshift(a)}db(Va)}}if(!(0<Xa)){if(k.preRun)for("function"==typeof k.preRun&&(k.preRun=[k.preRun]);k.preRun.length;)Wa();db(Ta);0<Xa||(k.setStatus?(k.setStatus("Running..."),setTimeout(function(){setTimeout(function(){k.setStatus("")},1);b()},1)):b())}}

[zplata]

@ivajo26 Thanks for reporting - do you have a sample project to reproduce?

[3lonious]

im using Tailwind in my project... wondering if my rending probem is related toi tailwind or maybe its like what Ivajo is dealing with?

[zplata]

Sorry for the delay - do you mind trying with the latest version? Additionally check out our new guidance on preloading WASM: https://help.rive.app/runtimes/overview/web-js/preloading-wasm

This will help especially in NextJS applications with loading in the WASM that is necessary to power Rive animations

[ryparker]

It would be nice to have a next.js example app and some specific pages in the docs for next.js users since it's got a lot of adoption and many users will run into the same non-trivial issues with rive.

Also if you do happen to make an example with next.js could you include content security policy rules? The recommend guidance of using wasm-unsave-eval works in firefox but not chrome, brave, or safari. I assume they all will adopt this new rule but in the meantime it would be nice to have a recommended workaround from the rive team.

[Renesauve]

Experiencing same issue here, is there a specific loader we need to use for this?

[nyuudo]

Same issue here. Neither importing as Rive or RiveComponent works, or importing as props or as a src, the riv files simply don't render. I even tried the link "https://cdn.rive.app/animations/vehicles.riv" that appears in the Rive React guide and not even that renders. Is there a proper REACT JS or NEXT JS loader ? Maybe there's an objectiely simple and plain way but I cannot seem to find it.

[meJohnnyRobert]

Same issue here. Neither importing as Rive or RiveComponent works, or importing as props or as a src, the riv files simply don't render. I even tried the link "https://cdn.rive.app/animations/vehicles.riv" that appears in the Rive React guide and not even that renders. Is there a proper REACT JS or NEXT JS loader ? Maybe there's an objectiely simple and plain way but I cannot seem to find it.

I've managed to get it working in my own project like his:

import { useRive } from '@rive-app/react-canvas';

const Logo = () => {

const { RiveComponent } = useRive({

src: "/YourLogo.riv",

autoplay: true,

onLoadError: () => console.log("ERROR LOADING RIVE"),

onLoad: () => console.log("LOADED RIVE"),

})

return (

<div style={{ width: '100px', height: '100px' }}>

<RiveComponent />

</div>

);

};

//then in your page layout in the page.tsx you can place it as per usual:

return (

<div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">

<Logo/>```

Just make sure to put the logo file(s) in a public folder. I'm using typescript, tailwind and App Router and I have the logo inside a public folder under the "app" folder. 

[nyuudo]

Thanks for your suggestion. Finally I was able to render a riv.file. I followed the logic of your code, I just had to add the 'use client' directive to the .tsx file that invoke the riv file.

[ivajo26]

I use CSP policy, but rive needs access unpkg.com