如何解决Vite项目中node_modules里的"../pkg"解析失败问题

问题描述 #

开发项目时无预警出现错误，未安装新包且此前运行正常。执行npm run dev时抛出[ERROR] Could not resolve "../pkg"，报错位置为node_modules/lightningcss/node/index.js:16:27。已尝试删除npm缓存、node_modules、package-lock.json后重新npm install，也按文档完成lightningcss的安装与Vite配置，但问题仍未解决。

错误日志：

"C:\Program Files\nodejs\npm.cmd" run dev

> music@0.0.0 dev
> vite


  VITE v6.1.0  ready in 1377 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help
X [ERROR] Could not resolve "../pkg"

    node_modules/lightningcss/node/index.js:16:27:
      16 │   module.exports = require(`../pkg`);
         ╵                            ~~~~~~~~

C:\Users\PASARGAD\web_practice\music\node_modules\esbuild\lib\main.js:1476
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/lightningcss/node/index.js:16:27: ERROR: Could not resolve "../pkg"
    at failureErrorWithLog (C:\Users\PASARGAD\web_practice\music\node_modules\esbuild\lib\main.js:1476:15)
    at C:\Users\PASARGAD\web_practice\music\node_modules\esbuild\lib\main.js:945:25
    at C:\Users\PASARGAD\web_practice\music\node_modules\esbuild\lib\main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v22.12.0

安装命令：

npm install --save-dev lightningcss

Vite配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
import browserslist from 'browserslist';
import {browserslistToTargets} from 'lightningcss';
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

解决方案 #

1. 锁定lightningcss兼容版本 #

Vite v6和Node.js v22可能与部分lightningcss版本存在兼容性问题，尝试安装稳定兼容版本：

npm install --save-dev lightningcss@1.27.0

安装完成后重新执行npm run dev。

2. 检查并修复lightningcss安装文件 #

进入项目的node_modules/lightningcss目录，确认是否存在pkg文件夹。若缺失，说明安装过程中文件损坏或未完整下载：

• Windows用户执行：

  rmdir /s /q node_modules\lightningcss
  npm install
  

• 类Unix用户执行：

  rm -rf node_modules/lightningcss
  npm install
  

3. 调整Vite配置的lightningcss导入方式 #

改用动态导入避免配置初始化阶段的路径解析问题，修改Vite配置文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
import browserslist from 'browserslist';

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: (async () => {
        const { browserslistToTargets } = await import('lightningcss');
        return browserslistToTargets(browserslist('>= 0.25%'));
      })()
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})

4. 切换Node.js至LTS版本 #

Node.js v22为较新版本，可能与lightningcss预编译二进制文件不兼容，降级至LTS版本（如v20）：

• 使用nvm切换（需先安装nvm）：

  nvm install 20
  nvm use 20
  

• 切换后重新执行npm install和npm run dev。

内容的提问来源于stack exchange，提问作者MOHAMMAD HASHEMI