Cannot find module 'css'

BingzhaoChen commented 3 weeks ago

Issue Checklist

[X] I am using NexT version 8.0 or later.
[X] I have already read the Troubleshooting page of Hexo and Troubleshooting page of NexT.
[X] I have already searched for current issues, which does not help me.

Expected behavior

正常运行

Actual behavior

Links to demo site with this issue:
Links to repository or source code of the blog:
Screenshots:

all new project

Steps to reproduce the behavior

新创建的hexo 和 Next。运行 hexo g -d 报错

Node.js and NPM Information

$ node -v && npm -v
v12.22.12
6.14.16

Package dependencies Information

$ npm ls --depth 0
hexo-site@0.0.0 G:\hexo_blog
+-- hexo@7.3.0
+-- hexo-generator-archive@2.0.0
+-- hexo-generator-category@2.0.0
+-- hexo-generator-index@4.0.0
+-- hexo-generator-tag@2.0.0
+-- hexo-renderer-ejs@2.0.0
+-- hexo-renderer-marked@6.3.0
+-- hexo-renderer-stylus@3.0.1
+-- hexo-server@3.0.0
+-- hexo-theme-landscape@1.0.0
`-- hexo-theme-next@8.20.0

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://example.com
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

NexT Configuration

theme: next

Other Information

chrome; windows 10;

welcome[bot] commented 3 weeks ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

sghuang19 commented 3 weeks ago

你好，是按照文档上的步骤初始化仓库的吗？我刚刚又尝试了一下，没有报错。步骤如下

hexo init blog
cd blog
npm install --save hexo-theme-next

然后在 _config.yml 中修改 theme: next，再 hexo s，能正常使用。

BingzhaoChen commented 3 weeks ago

你好，是按照文档上的步骤初始化仓库的吗？我刚刚又尝试了一下，没有报错。步骤如下
hexo init blog
cd blog
npm install --save hexo-theme-next
然后在 _config.yml 中修改 theme: next，再 hexo s，能正常使用。

对的。使用hexo默认的主题已经成功运行了。但是只要我用next就报错

BingzhaoChen commented 3 weeks ago

默认配置是正常运行的。

BingzhaoChen commented 3 weeks ago

我换成 icarus也是正常的

njzjz commented 3 weeks ago

报错代码位于：

https://github.com/next-theme/hexo-theme-next/blob/0708dc7e18cc06a80204c0d173799dabcc45a084/scripts/events/lib/utils.js#L5-L10

这个@adobe/css-tools好像不是项目的直接依赖？间接依赖是有风险的

sghuang19 commented 3 weeks ago

报错代码位于：

https://github.com/next-theme/hexo-theme-next/blob/0708dc7e18cc06a80204c0d173799dabcc45a084/scripts/events/lib/utils.js#L5-L10

这个@adobe/css-tools好像不是项目的直接依赖？间接依赖是有风险的

我之前唯一一次遇到这个错误，是卸载 hexo-renderer-stylus 造成的。@adobe/css-tools 是这个插件的依赖，NexT 默认它存在：

hexo-site@0.0.0 /Users/sghuang/dev/test
└─┬ hexo-renderer-stylus@3.0.1
  └─┬ stylus@0.62.0
    └── @adobe/css-tools@4.3.3

猜测这位用户是 Node 环境里出了什么问题，导致 Next 没有加载到 @adobe/css-tools，

我之前提议过把 hexo-renderer-stylus 加入 peer dependencies，现在看来最好的做法应该是我们直接把 CSS 放进 NexT 的依赖。然后删掉这个 try catch block。

sghuang19 commented 3 weeks ago

在删除掉 hexo-renderer-stylus 的情况下，只安装 css / @adobe/css-tools 依然无法正常渲染。

感觉最稳妥的做法是，把 hexo-renderer-stylus 和 css 或者 @adobe/css-tools 都加入依赖。

https://www.npmjs.com/package/css

https://www.npmjs.com/package/@adobe/css-tools

目前 css-tools 的下载量差不多是两倍于 css，并且还有维护，但是体积也大不少

sghuang19 commented 3 weeks ago

Node.js and NPM Information
$ node -v && npm -v
v12.22.12
6.14.16

@BingzhaoChen 您的 Node 和 NPM 的版本都太低了。目前 Node 最新版本已经是 v22.6.0，NPM 最新版本已经是 v10.8.2。升级之后应该能解决问题。

BingzhaoChen commented 2 weeks ago

Node.js and NPM Information
$ node -v && npm -v
v12.22.12
6.14.16
@BingzhaoChen 您的 Node 和 NPM 的版本都太低了。目前 Node 最新版本已经是 v22.6.0，NPM 最新版本已经是 v10.8.2。升级之后应该能解决问题。

升级到最新的node后可以了

stevenjoezhang commented 1 week ago

目前的主要问题是Hexo提供两种安装主题的方式：git clone或者npm i，即使主题把这些库显式加入依赖了，通过git clone安装主题的话还是不会安装上，所以干脆就没有管了… 这样确实是有风险的，我们可以在未来研究更规范的安装方法（例如检测到用户是通过git clone安装的主题，并且缺失依赖，就通过npm安装依赖包）

next-theme / hexo-theme-next