Next.js 踩坑记（2）—

date

May 29, 2024

slug

dev-dependencies

status

Published

引言

在写个人作品集这个项目时，由于遇到了让人非常恼火的路径问题，于是有了这篇博客

Next.js 踩坑记（1）——路径体操

如何愉快的将你的 Nextjs 项目部署上 Github Page？

https://musherm.github.io/nobelium/path-middle

这篇博客是在 notion 上完成写作的（包括现在这篇），再加之我有过了解，有很多项目支持直接从 notion 构建自己的个人博客，作为一个前端开发者，怎么能没有自己的博客呢？于是开始选型，辗转之下找到了这篇文章：

从奇思乱想到妙想天开

打怪→获得经验→升级⤴️

https://emergencyexit.xyz/upgrade-blog

作者对各种从 notion 生成博客的项目进行了调研，最终选用了 nobelium 这一项目：

GitHub - craigary/nobelium: A static blog build on top of Notion and NextJS, deployed on Vercel.

A static blog build on top of Notion and NextJS, deployed on Vercel. - craigary/nobelium

https://github.com/craigary/nobelium

好了，看来烦人的选型工作已经有人替我完成了，话不多说，开整！由于这个项目原型使用的是 Vercel 部署，但本着省钱的原则，作者和我都选择使用 Github Page 进行部署，这就要求我们将项目编译成静态页面，作者对此进行了一定的改造，所以本博客的部署实际上使用了作者改造的项目：

GitHub - IMBlues/nobelium: 布鲁斯鱼的妙想天开

布鲁斯鱼的妙想天开. Contribute to IMBlues/nobelium development by creating an account on GitHub.

https://github.com/IMBlues/nobelium

在根据教程进行了一番操作之后，我们又遇到了那个熟悉的问题：静态资源路径错误！

这是什么历史的循环？我因为出现静态资源路径错误，写了一篇博客专门介绍怎么解决这个问题，并且顺便部署一个博客把这篇文章放上去，但又在部署博客的过程中又遇到了静态资源报错。。。 😅

但是没关系！很幸运，这又是一个 Nextjs 项目，而我又恰巧刚刚学会如何解决，这不是手拿把掐？开整！

开始解决问题

根据经验，我把nextconfig改成了这样：

const isProd = process.env.NODE_ENV === "production";
module.exports = {
  basePath: isProd ? "/nobelium" : "",
  assetPrefix: isProd ? "/nobelium/" : "",
  webpack5: true,
  ...
};

主要就是加了个basePath和assetPath，跟我在 ‣ 这篇文章里提到的一样，还需要在编译的过程中提供一个NODE_ENV=’production’，就像这样：

- name: Build
  run: |
    npm i --registry https://registry.npmmirror.com --legacy-peer-deps -d 
    yarn build
    yarn export
  env:
    NODE_ENV: production

这一改，完了，Github 服务端编译不通过了，最致命的是，我在本地编译能通过，到底是哪一个环节出了问题？

问题定位

我决定通过分步骤更改的方式来测试哪一步造成了影响，最终定位在修改 NODE_ENV 这一环节，修改后仔细查看 build 错误信息如下：

./node_modules/gitalk/dist/gitalk.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/gitalk/dist/gitalk.css
Error: Cannot find module 'tailwindcss'
Require stack:
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack-config.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/index.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/cli/next-build.js
- /home/runner/work/nobelium/nobelium/node_modules/next/dist/bin/next
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at mod._resolveFilename (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.resolve (node:internal/modules/cjs/helpers:116:19)
    at loadPlugin (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:49:32)
    at /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:56
    at Array.map (<anonymous>)
    at Object.getPostCssPlugins (/home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:162:47)
    at async /home/runner/work/nobelium/nobelium/node_modules/next/dist/build/webpack/config/blocks/css/index.js:99:36

就是一堆模块找不到的问题，此时的我百思不得其解，我只是更改了一个环境变量，为什么会导致模块找不到呢？我把这个问题拿去问 GPT，GPT回复的答案仿佛醍醐灌顶，帮我彻底解决了这一问题，也就是本文的标题——开发依赖。

查看 package.json 可得：

{
  "name": "nobelium",
  "version": "1.3.0",
  "homepage": "https://nobelium.js.org",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/craigary/nobelium.git"
  },
  "author": {
    "name": "Craig Hart",
    "email": "i@craigary.net",
    "url": "http://craigary.net"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build && node ./.next/server/scripts/generate-rss.js",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "postbuild": "next-sitemap --config next-sitemap.config.js"
  },
  "dependencies": {
    "axios": ">=0.21.1",
    "feed": "^4.2.2",
    "gitalk": "^1.7.2",
    "next": "^12.1.0",
    "notion-client": "^4.10.0",
    "notion-utils": "^4.10.0",
    "preact": "^10.5.15",
    "react": "^17.0.2",
    "react-cusdis": "^2.0.1",
    "react-dom": "^17.0.2",
    "react-notion-x": "^4.11.0",
    "use-ackee": "^3.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "eslint": "<8.0.0",
    "eslint-config-next": "^12.0.3",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-react": "^7.26.1",
    "next-sitemap": "^1.6.203",
    "postcss": "^8.3.11",
    "tailwindcss": "^2.2.19"
  },
  "bugs": {
    "url": "https://github.com/craigary/nobelium/issues",
    "email": "i@craigary.net"
  }
}

我突然发现，原来报错里找不到的tailwindcss被标记成了开发依赖！当我在NODE_ENV里指定环境为生产环境时，就不会安装这个包，从而导致编译错误！解决的办法也很简单，把这几个包都挪到dependencies里就行了。

总结

这次的问题主要还是拿来主义在作祟，本来项目就是傻瓜式的，我能拿来直接用，部署步骤里面也没写我要改package.json，我为什么要关注这个呢？所以我自然也不会知道有些东西被标记成了开发依赖（我在此之前甚至不知道有这个东西）

至于成果展示嘛，你现在看到的这篇博客，就是我部署的博客了，如果你看到这里，wish you have a good day!

😶‍🌫️ Next.js 踩坑记（2）——开发依赖

引言

开始解决问题

问题定位

总结