连接Bigcommerce Stencil推送失败：找不到webpack模块问题求助

问题详情 #

能正常拉取、下载Bigcommerce Stencil内容，但推送时触发Error: Cannot find module 'webpack'错误，已尝试以下命令仍未解决：

rm -rf node_modules
rm -f package-lock.json
npm install
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --legacy-peer-deps
npm install --save --legacy-peer-deps

错误日志：

internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'webpack'

Require stack:
- C:\Users\z\downloads\bigcommerce\skeyndor\stencil.conf.js
- C:\Users\z\AppData\Roaming\npm\node_modules\@bigcommerce\stencil-cli\lib\BuildConfigManager.js
- C:\Users\z\AppData\Roaming\npm\node_modules\@bigcommerce\stencil-cli\lib\stencil-start.js
- C:\Users\z\AppData\Roaming\npm\node_modules\@bigcommerce\stencil-cli\bin\stencil-start.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (C:\Users\z\downloads\bigcommerce\skeyndor\stencil.conf.js:1:15)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\Users\\z\\downloads\\bigcommerce\\skeyndor\\stencil.conf.js',
    'C:\\Users\\z\\AppData\\Roaming\\npm\\node_modules\\@bigcommerce\\stencil-cli\\lib\\BuildConfigManager.js',
    'C:\\Users\\z\\AppData\\Roaming\\npm\\node_modules\\@bigcommerce\\stencil-cli\\lib\\stencil-start.js',
    'C:\\Users\\z\\AppData\\Roaming\\npm\\node_modules\\@bigcommerce\\stencil-cli\\bin\\stencil-start.js'
  ]
}

解决方案 #

1. 检查并修正stencil.conf.js的webpack引入 #

打开项目根目录下的stencil.conf.js，查看第1行的webpack引入代码。如果是直接require('webpack')，可修改为明确指向项目本地安装的webpack：

const webpack = require('./node_modules/webpack');

2. 全局安装Stencil CLI兼容的webpack版本 #

Stencil CLI对webpack版本有特定依赖，需匹配版本安装：

1. 进入Stencil CLI全局安装目录：cd C:\Users\z\AppData\Roaming\npm\node_modules\@bigcommerce\stencil-cli
2. 查看package.json中的webpack依赖版本：type package.json | findstr "webpack"
3. 全局安装对应版本：npm install -g webpack@x.x.x（替换x.x.x为查到的版本号）

3. 彻底清理依赖并重新初始化 #

npm cache clean --force
rm -rf node_modules
rm -f package-lock.json
# 若有备份的package.json，复制后执行安装；若无则重新初始化项目
npm init -y
npm install @bigcommerce/stencil-cli --save-dev
npm install webpack webpack-dev-server --save-dev --legacy-peer-deps

4. 用npx调用本地Stencil CLI #

避免全局与本地依赖冲突，直接使用项目本地的Stencil CLI执行推送：

npx stencil push

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