CODEWITHSUNDEEP
reactjsnext.jsnextjs-imagewasm-pack
Damiisdandy
Damiisdandy

Reputation: 407

Nextjs 11 new use of import keyword for image 'src' throwing error CompileError: mutable globals cannot be exported

I recently upgraded to nextjs 11 and used their new image feature where you can import your images and use them in the src attribute as follows:

import mallImage from '../public/images/ads/mall.png';

then use can use it as

<Image src={mallImage} alt="image of person" />

it was working fine, till it started to throw the error

./public/images/ads/mall.png
CompileError: AsyncCompile: Wasm decoding failed: mutable globals cannot be exported @+482

I am so confused because I am using it exactly how it is used in the documentation https://nextjs.org/blog/next-11#image-improvements

THIS BUG SEEMS TO ONLY BE HAPPENING ON THE DEV SERVER

Upvotes: 4

Views: 2120

Answers (1)

Jeet Makwana
Jeet Makwana

Reputation: 75

Solution: Do not import like react. and try this

<Image src={"/images/ads/mall.png"} alt="image of person" layout={"fill"} />

or

<Image src={"/images/ads/mall.png"} alt="image of person" width={100} height={100} />

Upvotes: 1

Related Questions