Unable to build on M1

[larswmh]

When trying to build the website on an M1 MacBook it fails. For some reason, this does not appear to be the case for other contributors.

• Node version: v18.12.1
• npm version: 8.19.2
• gulp-imagemin@8.0.0

When I run npm run build the following error occurs:

[23:17:04] TypeError in plugin "gulp-imagemin"
Message:
    function_ is not a function
Details:
    fileName: /Users/lars/Documents/GitHub/cwa-website/src/assets/img/App_Store_Badge_DE.svg
    domainEmitter: [object Object]
    domainThrown: false

When I run npm run dev the following error occurs:

[23:16:39] Error in plugin "gulp-webp"
Message:
    spawn Unknown system error -86
Details:
    errno: -86
    code: Unknown system error -86
    syscall: spawn
    fileName: /Users/lars/Documents/GitHub/cwa-website/src/assets/img/app-mockup.png
    domainEmitter: [object Object]
    domainThrown: false

As discovered by @MikeMcC399 in #3100 (comment), I'm not the only one who has encountered this issue so far. The TypeError for gulp-imagemin was already reported in its repository at sindresorhus/gulp-imagemin#373.

If anyone is able to reproduce this, feel free to comment below. It is of great interest for us to make this project work on M1 devices.

[Ein-Tim]

@larswmh

I assume you already restarted your machine & tried if completely removing the local copy of this repo and re-adding it fixes the issue?

[MikeMcC399]

@larswmh

I found some reports related to the error messages which sounded like npm modules for the wrong architecture were installed.

You might try deleting the node_modules folder and then running npm ci to reinstall exactly what is defined in package-lock.json.

I'm guessing that this might have something to do with mixed up emulation, but I have no experience on Macs, so that is just a wild guess!

[larswmh]

@Ein-Tim

I assume you already restarted your machine & tried if completely removing the local copy of this repo and re-adding it fixes the issue?

Yes, did that but that unfortunately didn't fix it

@MikeMcC399

You might try deleting the node_modules folder and then running npm ci to reinstall exactly what is defined in package-lock.json.

This also sadly did not fix the issue. Thank you both for your advice though!

I'm guessing that this might have something to do with mixed up emulation, but I have no experience on Macs, so that is just a wild guess!

I don't really have experience either, I rarely use it but thought it might be useful for our Mac testing. I have never done anything with emulation on this, the device is still pretty much like how it came out of the box

[Ein-Tim]

@larswmh

Could you try removing the repo, switching the terminal to use Rosetta II emulation (as explained here: https://support.presonus.com/hc/en-us/articles/4407850496141-How-to-switch-from-native-Apple-Silicon-support-to-Rosetta-mode), installing the repo & then executing the commands in the terminal which now uses Rosetta II?

This way we could find out if this is an issue with the emulation.

[larswmh]

@Ein-Tim

Could you try removing the repo, switching the terminal to use Rosetta II emulation (as explained here: https://support.presonus.com/hc/en-us/articles/4407850496141-How-to-switch-from-native-Apple-Silicon-support-to-Rosetta-mode), installing the repo & then executing the commands in the terminal which now uses Rosetta II?

This way we could find out if this is an issue with the emulation.

This way the build runs perfectly. Interestingly, when disabling it for the terminal again, removing the node_modules folder and running npm install and npm run build again, the error does not occur anymore. Even after a full reinstall, it still works. It seems like Rosetta is just required to be installed for now

[larswmh]

I will prepare a pull request to adjust the README.md accordingly

[MikeMcC399]

@larswmh

I will prepare a pull request to adjust the README.md accordingly

Great suggestion!

Your results suggest that parts of the build process including npm modules are not fully compatible with the M1 ARM hardware architecture if it works by installing the Rosetta 2 emulation.

You didn't mention which version of macOS you are using. I don't know if that makes any difference.

When I Googled about Rosetta the results said that it was not installed by default.

[larswmh]

@MikeMcC399 @Ein-Tim

You didn't mention which version of macOS you are using. I don't know if that makes any difference.

It's the latest version 13.0 (22A380).

Anyway, thank you both for your extensive help on this issue!

[MikeMcC399]

@larswmh

It looks like using Rosetta 2 is the only available workaround at this time. Deep down in the npm dependencies there are some binaries called up and for instance there is an old version of cwebp-bin (5.1.0) being used (latest is 8.0.0).

The version of gulp-webp (4.0.1) is the latest, although it is 4 years old. This is using imagemin-webp 5.1.0 released 3 years ago, and the current version is 7.0.0.

The latest gulp version (4.0.2) itself is also 4 years old, so it seems we have to work around whatever shortcomings are surfacing. I don't expect much gulp update activity to occur. I guess a new project would prefer other tool / framework options?

[MikeMcC399]

Also I found that there are no GitHub-hosted runners for Apple M1 (see https://github.com/actions/runner-images and issue 2187) so this is a barrier to automated (CI) testing of npm packages. It is however possible to set up a self-hosted runner for ARM64 under macOS, but these are not recommended for public repositories due to security concerns.