Support Forums

Netlify-templates/one-click-hugo-cms won't build locally

Hi All,

I’m new to Netlify but really excited about its approach and the legacy issues it addresses.

I’m trying to get the tool chain and end to end process working with challenges getting the unmodified template building locally. I trying to use the “netlify-templates/one-click-hugo-cms” template and when building from the Netlify UI all works well, the Git repo is populated and the site is built and works well.

The issues are with building the site locally on my Mac. I have installed Node (v17.3.0), NPM (8.3.0) along with Yarn (1.22.17).

When I first build and run it complains about node-sass and so using THIS post I managed to work around this.

Then it complains about Webpack. I updated package.json to use "start:webpack": "webpack serve --config webpack.dev.js --hot", rather than the defaults which seems to work.

Also needed to run this CLI command to get it to start fully: export NODE_OPTIONS=--openssl-legacy-provider.

So now I have it running but the site is corrupt with errors related to main.css and sass-loader:

ERROR in ./src/css/main.css (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/dist/cjs.js!./src/css/main.css) 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): SassError: Expected identifier. ╷ 25 │ z-index: 2; │ ^
All in all this seems related to the current version of Node and NPM being newer than when the template was created. I’m happy to regress versions but not sure what version to use and not having tried to regress versions yet, I expect there to be issues.

Any advice and guidance to get the end to end workflow working would be really appreciated. The target workflow is:

  • Update site content locally
  • build and test locally
  • commit changes to git
  • publish from git via Netlify

Thanks in advance, looking forward to seeing the site finished and working on Netlify.

It seems like a sass issue indeed, more specifically the bit at this line:

Can you check if there’s any errors in the actual css code? Semi-colons, curly brackets etc…

Hi Tom, thanks for your reply.

I have managed to get a little further by using an older version of Node. I installed NVM and installed Node 12. I then cloned a clean version of the template that works on Netlify and build locally with “yarn” and “yarn start”. It now builds correctly without errors.

Just an FYI: I think if I had NVM installed from the beginning, all would have been fine as I have now noticed a file in the repo “.nvmrc” which tries to tell the local env to build using Node 12.

The first time it loads locally it’s format is corrupt however if I stop it and “yarn start” again it loads correctly.

ANSWER: Install NVM from this repo and then install Node 12 using “nvm install 12”. Then rebuild locally using “yarn” and “yarn start”.

Hopefully this helps other newbies.