CD
Cloudflare Developers•4d ago
Ireld

Wasm on opennext/cloudflare causes issues with Webpack

I'm trying to use @cf-wasm/photon (an Image manipulation library) with opennext well the reason is Cloudflare Images having too expensive and unreasonable pricing compared to other products so as a cost saving measure in a personal project I wanted to avoid Images product much as possible and reimplement It's functionality through Workers and R2. What I do: - Send request to NextJS api endpoint from UI - Attempt to resize and crop - Upload to R2 - Send to an AI image moderation service to check if the image is offensive - Send a request to internal API written in .NET Core updating profile fields (NextJS itself isn't my "real" backend here, It's just BFF pattern) Problem is opennext/cloudflare and Wasm don't go well together. It runs and compiles perfectly fine locally but when deployed break aparts with no obvious warning, it also swallows errors so you can't debug it. The next api simply returns 500. if @cf-wasm/photon/next used instead of @cf-wasm/photon (no error in dev but doesn't work in production) this error happens 
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)
Module parse failed: Unexpected character '' (1:0)
The module seem to be a WebAssembly module, but module is not flagged as WebAssembly module for webpack.
BREAKING CHANGE: Since webpack 5 WebAssembly is not enabled by default and flagged as experimental feature.
You need to enable one of the WebAssembly experiments via 'experiments.asyncWebAssembly: true' (based on async modules) or 'experiments.syncWebAssembly: true' (like webpack 4, deprecated).
For files that transpile to WebAssembly, make sure to set the module type in the 'module.rules' section of the config (e. g. 'type: "webassembly/async"').
(Source code omitted for this binary file)
Workarounds: Create another worker and map it using Routes Move resize logic to .NET but this would break roles of stack
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?