Stencil项目搭建问题：node-osc依赖解析与Rollup版本不兼容

问题1：UNRESOLVED_IMPORT警告导致组件无法渲染 #

• 原因：node-osc是为Node.js环境开发的库，依赖Node.js内置的net、dgram等模块，浏览器环境不支持这些模块。Rollup默认会把Node.js专属库标记为外部依赖跳过打包，导致浏览器端无法找到对应模块，组件无法正常渲染。
• 解决步骤：
  1. 替换为浏览器兼容的OSC库：推荐使用osc-js，它原生支持浏览器环境，无需额外配置即可在Web组件中使用。执行安装命令：

     npm install osc-js
     

     之后将代码中的node-osc引用替换为osc-js即可。
  2. 若坚持使用node-osc，需通过Rollup插件补全Node.js内置模块的浏览器兼容层：
     • 安装依赖插件：

       npm install @rollup/plugin-node-polyfills --save-dev
       

     • 修改Rollup配置文件，移除node-osc的外部依赖标记并添加插件：

       import nodePolyfills from '@rollup/plugin-node-polyfills';
       import resolve from '@rollup/plugin-node-resolve';
       
       export default {
         // 保留其他原有配置
         external: [], // 确保node-osc不在外部依赖列表中
         plugins: [
           resolve({ preferBuiltins: false }), // 优先解析npm包而非Node.js内置模块
           nodePolyfills() // 提供Node.js内置模块的浏览器兼容实现
         ]
       };
       

问题2：Rollup版本不匹配错误 #

• 原因：项目实际运行的Rollup版本（2.42.3）与@rollup/plugin-node-resolve要求的最低版本（2.78.0）不兼容。package-lock.json显示的安装版本可能是子依赖版本，或全局Rollup版本低于要求导致冲突。
• 解决步骤：
  1. 更新项目本地Rollup版本：
     打开package.json，确认devDependencies中的rollup版本，若低于2.78.0，执行更新命令：

     npm install rollup@^2.79.1 --save-dev
     

  2. 强制使用项目本地Rollup：
     打包时使用npx调用本地版本，避免使用全局Rollup：

     npx rollup -c
     

  3. 清理缓存并重新安装依赖：
     删除node_modules文件夹和package-lock.json，执行：

     npm install
     

     确保所有依赖版本统一。
  4. 强制统一子依赖Rollup版本：
     若存在子依赖引入低版本Rollup，在package.json中添加resolutions字段：

     "resolutions": {
       "rollup": "^2.79.1"
     }
     

     执行npm install应用该设置。

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