search

google / docsy

A set of Hugo doc templates for launching open source content.
https://docsy.dev
Apache License 2.0
2.55k stars 888 forks source link

Error creating site with Hugo & Docsy #1586

Open skynet-daemon opened 1 year ago

skynet-daemon commented 1 year ago

Hi,

I'm a newbie with Hugo and Node. When I created a site from scratch according to this URL Create a new site: Start a new site from scratch you can't build the site with Hugo.

It seems something is missing with npm.

These are the steps I did:

$ hugo new site site-from-scratch
$ cd site-from-scratch
$ hugo mod init github.com/me/site-from-scratch
$ hugo mod get github.com/google/docsy@v0.7.0
$ echo "" >> hugo.toml 
$ cat >> hugo.toml <<EOL
[module]
proxy = "direct"
[[module.imports]]
path = "github.com/google/docsy"
[[module.imports]]
path = "github.com/google/docsy/dependencies"
EOL
$ npm install postcss postcss-cli
$ hugo 
Start building sites … 
hugo v0.114.0+extended darwin/amd64 BuildDate=unknown

Total in 2088 ms
Error: error building site: POSTCSS: failed to transform "scss/main.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Require stack:
- /var/folders/2p/xm9bk02j2js9t_1w4lv543xm0000gn/T/hugo_cache_gerard/modules/filecache/modules/pkg/mod/github.com/google/docsy@v0.7.0/postcss.config.js

(@/var/folders/2p/xm9bk02j2js9t_1w4lv543xm0000gn/T/hugo_cache_gerard/modules/filecache/modules/pkg/mod/github.com/google/docsy@v0.7.0/postcss.config.js)
    at load (/Users/gerard/node_modules/postcss-load-config/src/plugins.js:28:11)
    at /Users/gerard/node_modules/postcss-load-config/src/plugins.js:53:16
    at Array.map (<anonymous>)
    at plugins (/Users/gerard/node_modules/postcss-load-config/src/plugins.js:52:8)
    at processResult (/Users/gerard/node_modules/postcss-load-config/src/index.js:38:14)
    at /Users/gerard/node_modules/postcss-load-config/src/index.js:162:14
    at async Promise.all (index 0)

These are my package versions:

$ hugo version
hugo v0.114.0+extended darwin/amd64 BuildDate=unknown

$ node -v
v18.16.1

$ ll      
total 24
drwxr-xr-x  15 gerard  staff   480B Jun 21 01:04 ./
drwxr-xr-x   7 gerard  staff   224B Jun 21 01:03 ../
-rw-r--r--   1 gerard  staff     0B Jun 21 01:04 .hugo_build.lock
drwxr-xr-x   3 gerard  staff    96B Jun 21 01:03 archetypes/
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 assets/
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 content/
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 data/
-rw-r--r--   1 gerard  staff   100B Jun 21 01:03 go.mod
-rw-r--r--   1 gerard  staff   491B Jun 21 01:03 go.sum
-rw-r--r--   1 gerard  staff   226B Jun 21 01:04 hugo.toml
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 layouts/
drwxr-xr-x  12 gerard  staff   384B Jun 21 01:09 public/
drwxr-xr-x   3 gerard  staff    96B Jun 21 01:03 resources/
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 static/
drwxr-xr-x   2 gerard  staff    64B Jun 21 01:03 themes/

$ uname -a
Darwin Gerard-MacBook-Pro.local 22.5.0 Darwin Kernel Version 22.5.0: Mon Apr 24 20:51:50 PDT 2023; root:xnu-8796.121.2~5/RELEASE_X86_64 x86_64

$ sw_vers
ProductName:        macOS
ProductVersion:     13.4
BuildVersion:       22F66

Thanks in advance, -Gerard

LisaFC commented 1 year ago

Hi Gerard! Have you checked that you've installed all the prerequisites in this page? https://www.docsy.dev/docs/get-started/docsy-as-module/installation-prerequisites/

You need to explicitly install PostCSS otherwise the SCSS bit won't work.

skynet-daemon commented 1 year ago

Hi Lisa,

Yes

$ go version                  
go version go1.19.3 darwin/amd64

$ git version
git version 2.41.0
$ npm install -D autoprefixer
$ npm install -D postcss-cli
$ npm install -D postcss

Still doesn't work, have the same error.

These are my project's files:

$ tree
.
|-- archetypes
|   `-- default.md
|-- assets
|-- content
|-- data
|-- go.mod
|-- go.sum
|-- hugo.toml
|-- layouts
|-- public
|   |-- 404.html
|   |-- categories
|   |   |-- index.html
|   |   `-- index.xml
|   |-- css
|   |   |-- prism.css
|   |   `-- swagger-ui.css
|   |-- favicons
|   |   |-- android-144x144.png
|   |   |-- android-192x192.png
|   |   |-- android-36x36.png
|   |   |-- android-48x48.png
|   |   |-- android-72x72.png
|   |   |-- android-96x96.png
|   |   |-- apple-touch-icon-180x180.png
|   |   |-- favicon-1024.png
|   |   |-- favicon-16x16.png
|   |   |-- favicon-256.png
|   |   |-- favicon-32x32.png
|   |   |-- favicon.ico
|   |   |-- pwa-192x192.png
|   |   |-- pwa-512x512.png
|   |   |-- tile150x150.png
|   |   |-- tile310x150.png
|   |   |-- tile310x310.png
|   |   `-- tile70x70.png
|   |-- index.html
|   |-- index.xml
|   |-- js
|   |   |-- click-to-copy.min.f724d3de49218995223b7316aa2e53e2b34bf42026bf399ebb21bb02212402d1.js
|   |   |-- deflate.js
|   |   |-- main.min.e364b9cb51fa9c6679087260985ea24e003c0b5fd8c061dc76f4b0597bd36d3c.js
|   |   |-- prism.js
|   |   |-- swagger-ui-bundle.js
|   |   |-- swagger-ui-standalone-preset.js
|   |   `-- tabpane-persist.js
|   |-- sitemap.xml
|   |-- tags
|   |   |-- index.html
|   |   `-- index.xml
|   `-- webfonts
|       |-- fa-brands-400.ttf
|       |-- fa-brands-400.woff2
|       |-- fa-regular-400.ttf
|       |-- fa-regular-400.woff2
|       |-- fa-solid-900.ttf
|       |-- fa-solid-900.woff2
|       |-- fa-v4compatibility.ttf
|       `-- fa-v4compatibility.woff2
|-- resources
|   `-- _gen
|       |-- assets
|       `-- images
|-- static
`-- themes

19 directories, 47 files

Any idea?

Regards, -Gerard

deining commented 1 year ago

Still doesn't work, have the same error.

This is really strange. The error given in your first post clearly indicates that dependency autoprefixer is missing. As already mentioned above, this can be corrected with: 

$ npm install -D autoprefixer

Are you sure that you are facing the same error? Can you repost the error message? Is your site repo publicly available?

skynet-daemon commented 1 year ago

Are you sure that you are facing the same error?

YES

Can you repost the error message?


$ hugo
Start building sites … 
hugo v0.114.0+extended darwin/amd64 BuildDate=unknown

Total in 3185 ms
Error: error building site: POSTCSS: failed to transform "scss/main.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Require stack:
- /var/folders/2p/xm9bk02j2js9t_1w4lv543xm0000gn/T/hugo_cache_gerard/modules/filecache/modules/pkg/mod/github.com/google/docsy@v0.7.0/postcss.config.js

(@/var/folders/2p/xm9bk02j2js9t_1w4lv543xm0000gn/T/hugo_cache_gerard/modules/filecache/modules/pkg/mod/github.com/google/docsy@v0.7.0/postcss.config.js)
    at load (/Users/gerard/node_modules/postcss-load-config/src/plugins.js:28:11)
    at /Users/gerard/node_modules/postcss-load-config/src/plugins.js:53:16
    at Array.map (<anonymous>)
    at plugins (/Users/gerard/node_modules/postcss-load-config/src/plugins.js:52:8)
    at processResult (/Users/gerard/node_modules/postcss-load-config/src/index.js:38:14)
    at /Users/gerard/node_modules/postcss-load-config/src/index.js:162:14
    at async Promise.all (index 0)

Is your site repo publicly available?

Me what? I am working locally. At this moment I don't have a repo for my site. In the initial post, there are the commands I used to setup the site.

dcrec1 commented 1 year ago

I have the same error with the same versions. npm list returns:

├── autoprefixer@10.4.14
├── express@4.17.2
├── postcss-cli@10.1.0
└── postcss@8.4.24
deining commented 1 year ago

Today I encountered the same error. I was able to overcome it with one command:

hugo mod vendor

Pleas note that this is a workaround only. As I now can reproduce the error, I will investigate what's going wrong here.

deining commented 1 year ago

I think I now know what went wrong here. Can you please run

npm init

Then answer the questions in the command line questionnaire. Afterwards, issue:

npm install -D autoprefixer
npm install -D postcss-cli

Now you should be able to successfully run:

hugo server

@drec1 @skynet-daemon: Can you please try that and report back whether this cures your problem?

grupodeca commented 1 year ago

I see, a package.json file is missed, it's all I know. Sorry I'm not a node programer. Let me investigate what to do with npm init.

grupodeca commented 1 year ago

I've created package.json manually:

{
  "name": "docsy-site-from-scratch",
  "version": "0.7.0",
  "description": "Docsy site from scratch",
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "hugo-extended": "0.113.0",
    "postcss-cli": "^10.1.0"
  }
}

Then ran:


npm install -D autoprefixer
npm install -D postcss-cli

And finally the hugo command worked as expected.

Thanks.

grupodeca commented 1 year ago

Just to let you know, there is an update of docsy.

% hugo mod get -u github.com/google/docsy
go: upgraded github.com/google/docsy v0.7.0 => v0.7.1

Regards

grupodeca commented 1 year ago

Hi,

There is definitely something I don't know about the git repo. I've cloned the docsy-example again:

% git clone --depth 1 --branch v0.7.1 https://github.com/google/docsy-example.git docsy_example_theme

Then, I've copied .git and .github folders from docsy_example_theme to my docsy_production_theme. Now works, hugo server and hugo commands works again.

Thanks, -Gerardo