Apple Silicon issues with hugo-bin and node-sass (and workaround)

[sergioisidoro]

Currently this project does not work with Apple Silicon (M1) processors.

Currently this issue: sass/node-sass#3033 prevents node-sass from being installed, and hugo-bin seems go give:

Error: spawn /Users/sergio/Developer/victor-hugo/node_modules/hugo-bin/vendor EACCES
    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:480:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
    at onErrorNT (node:internal/child_process:480:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -13,

For anyone searching for solutions, this is what worked for me:

1. Replace node-sass dependency by "sass": "^1.35.1",
2. Remove hugo-bin from the dependencies
   2.1. Remove node modules
   2.2. npm install
3. 🪄 Magic

(To work, this assumes you have hugo installed globally. Binaries for Apple Silicon are already available)

Another possibility (that I have not tested) is to use rosetta:

rm -rf node_modules
npm install --target_arch=x64

Leaving this here in hopes it will help someone.
Happy coding 🎉

[ebauger]

NOTE: I use a fork repo with yarn instead of npm.

hugo-bin seem to work well if you bum to 0.71.1

yarn upgrade hugo-bin --latest

For my side, I have more issue with mini-css-extract-plugin css-loader and sass-loader

When I run yarn build

here the output

ERROR in ./src/scss/main.scss (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/website-hugo/node_modules/sass-loader/dist/index.js:25:24)
    at /website-hugo/node_modules/webpack/lib/NormalModule.js:316:20
    at /website-hugo/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /website-hugo/node_modules/loader-runner/lib/LoaderRunner.js:233:18
 @ ./src/scss/main.scss 2:26-193 43:4-64:5 46:18-185
 @ multi ./src/main.js ./src/scss/main.scss
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/scss/main.scss:
     1 asset
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss 268 bytes {0} [built] [failed] [1 error]

    ERROR in ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    TypeError: this.getOptions is not a function
        at Object.loader (/website-hugo/node_modules/sass-loader/dist/index.js:25:24)

UPDATE 1
I did the upgrade to the latest version of the 3 packages, same error. I'll continue the investigation.

UPDATE 2
bump to latest webpack & webpack-cli version

yarn build                                                                                                               website-hugo -> master ? !
yarn run v1.22.10
$ rimraf dist
$ yarn run build:webpack && yarn run build:hugo && yarn minify-html
$ cross-env NODE_ENV=production node_modules/.bin/webpack --config webpack.prod.js
[webpack-cli] Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[0].rules[0].loader: file-loader?name=/[hash].[ext])
    at RuleSetCompiler.error (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
    at /website-hugo/node_modules/webpack/lib/rules/UseEffectRulePlugin.js:160:29
    at Hook.eval [as call] (eval at create (/website-hugo/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:33:1)
    at RuleSetCompiler.compileRule (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:177:19)
    at /website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
    at RuleSetCompiler.compileRule (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:184:30)
    at /website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
    at RuleSetCompiler.compile (/website-hugo/node_modules/webpack/lib/rules/RuleSetCompiler.js:68:22)
    at VueLoaderPlugin.apply (/website-hugo/node_modules/vue-loader/lib/plugin-webpack5.js:49:39)
    at createCompiler (/website-hugo/node_modules/webpack/lib/webpack.js:74:12)
    at create (/website-hugo/node_modules/webpack/lib/webpack.js:127:16)
    at webpack (/website-hugo/node_modules/webpack/lib/webpack.js:135:47)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

UPDATE 3
I'll investigate if I need to migrate the webpack.prod.js to v4 to v5. I will read the docs.

[sergioisidoro]

Nice catch with the hugo-bin. Makes sense :)

Did you check if hugo it was running on Rosetta compatibility mode or on native apple silicon?
Should we make a pull request bumping hugo-bin then?

I've only used npm install / npm start and everything worked fine.
Did not check how things went with yarn.

[ebauger]

@sergioisidoro

I have an apple silicon (mac mini m1) and I'll try to make a workaround on my local machine first.

For the contribution on this repo (pull request), I don't know right now how to proceed.

I'll continuing my investigation tomorrow and I post UPDATES if needed.

[ebauger]

@sergioisidoro

I made a PR #522 for bumping all the old deprecated packages (not all, but the minimum package) for running without errors.

It should work on start and on build

[timtorres]

I have an Intel processor (Big Sur v11.4) but was also having issues with node-sass. I'm pretty new to CLI and this all so I spent a lot of time trying to diagnose and fix the errors. Your steps 1-3 worked perfectly for me! I also installed hugo-bin manually afterward as I don't think I had it installed globally.

[ebauger]

@timtorres You are right. You can check my fork here or use it for starting your project.

You can compare the package.json. node-sass is now sass and bump some package like webpack v5